Thursday, September 28, 2023
bestflutterpack.com

Timeline package for Flutter

January 4, 2023TimelineUITimelineUi

A timeline is a visual representation of events that are displayed in chronological order, typically along a line.

It shows the sequence of events or the progression of time. Timelines can be used in a variety of contexts, including in history and project management. They can help to illustrate the relationships between events and the duration of events. Today i am going to showcase another awesome flutter package for a timeline feature that supports images, text and so more .

This package is an early stage. Not enough testing has been done to guarantee stability. Some APIs may change.

Features

The timeline and each components are all WIDGET.

  • Common styles can be easily implemented with predefined components.
  • Vertical, horizontal direction.
  • Alternating contents.
  • Combination with Flutter widgets(Row, Column, CustomScrollView, etc).
  • Customize each range with themes.

Getting started

  • Installation
  • Basic Usage
  • Components
    • Theme
    • Indicator
    • Connector
    • TimelineNode
    • TimelineTile
    • Timeline
    • TimelineTileBuilder

Installation

1. Depend on it

Add this to your package’s pubspec.yaml file:

dependencies:
  timelines: ^[latest_version]

2. Install it

You can install packages from the command line:

with Flutter:

$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import 'package:timelines/timelines.dart';

Basic Usage

@override
Widget build(BuildContext context) {
  return Timeline.tileBuilder(
    builder: TimelineTileBuilder.fromStyle(
      contentsAlign: ContentsAlign.alternating,
      contentsBuilder: (context, index) => Padding(
        padding: const EdgeInsets.all(24.0),
        child: Text('Timeline Event $index'),
      ),
      itemCount: 10,
    ),
  );
}

Check the Example or the API reference for more details.

Components

Theme

Check out Theme Demo to see how the values inside TimelineTile work with the theme.

To customize the timeline component with a theme, do the following:

TimelineTheme(
  data: TimelineThemeData(...),
  child: DotIndicator(...),
);

If you only want to change part of the parent theme, use TimelineTheme.of(context):

TimelineTheme(
  data: TimelineThemeData.of(context).copyWith(...),
  child: DotIndicator(...),
);

If the component you want to customize is Timeline or FixedTimeline, this is also possible:

FixedTimeline(
  theme: TimelineThemeData(...),
  children: [...],
);

Indicators

ContainerIndicator
ContainerIndicator 
ContainerIndicator(
  child: Container(
    width: 15.0,
    height: 15.0,
    color: Colors.blue,
  ),
)
DotIndicator
DotIndicator 
DotIndicator()
OutlinedDotIndicator
OutlinedDotIndicator 
OutlinedDotIndicator()

Connector

SolidLineConnector
SolidLineConnector 
SizedBox(
  height: 20.0,
  child: SolidLineConnector(),
)
DashedLineConnector
DashedLineConnector 
SizedBox(
  height: 20.0,
  child: DashedLineConnector(),
)
DecoratedLineConnector
DecoratedLineConnector 
SizedBox(
  height: 20.0,
  child: DecoratedLineConnector(
    decoration: BoxDecoration(
      gradient: LinearGradient(
        begin: Alignment.topCenter,
        end: Alignment.bottomCenter,
        colors: [Colors.blue, Colors.lightBlueAccent[100]],
      ),
    ),
  ),
)

TimelineNode

Pure timeline UI component with no content.

The TimelineNode contains an indicator and two connectors on both sides of the indicator:

Simple TimelineNode
Simple TimelineNode 
SizedBox(
  height: 50.0,
  child: TimelineNode.simple(),
)
Complex TimelineNode
Complex TimelineNode 
SizedBox(
  height: 80.0,
  child: TimelineNode(
    indicator: Card(
      margin: EdgeInsets.zero,
      child: Padding(
        padding: EdgeInsets.all(8.0),
        child: Text('Complex'),
      ),
    ),
    startConnector: DashedLineConnector(),
    endConnector: SolidLineConnector(),
  ),
)

TimelineTile

Displays content on both sides of the node:

TimelineTile
TimelineTile 
TimelineTile(
  oppositeContents: Padding(
    padding: const EdgeInsets.all(8.0),
    child: Text('opposite\ncontents'),
  ),
  contents: Card(
    child: Container(
      padding: EdgeInsets.all(8.0),
      child: Text('contents'),
    ),
  ),
  node: TimelineNode(
    indicator: DotIndicator(),
    startConnector: SolidLineConnector(),
    endConnector: SolidLineConnector(),
  ),
)

A timeline is a useful tool for displaying events or the progression of time in a clear and concise manner.

Demo

Source:chulwoo-park/timelines
Tags:TimelineUi

You Might Also Like