A package to help build customisable timelines in Flutter.

Related tags

UI timeline_tile
Overview

TimelineTile

A package to help build customisable timelines in Flutter.


Example

Some use cases:


Timeline Showcase

Football Timeline

Activity Timeline

Success Timeline

Delivery Timeline

Weather Timeline

Horizontal Timelines

Getting Started

A Timeline consists in a group of TimelineTiles. To build a tile you can simply use:

TimelineTile()

Which will build a default tile with a vertical axis, that aligns to the start, with a height of 100:

Simple Timeline

The axis can be switched to render an horizontal tile, aligned to the start, with a default width of 100:

TimelineTile(axis: TimelineAxis.horizontal)

Horizontal Simple Timeline

There are 4 types of alignment.

  • TimelineAlign.start
  • TimelineAlign.end
  • TimelineAlign.center
  • TimelineAlign.manual

The start and end alignment allows a child in their opposite sides. On the other hand, both center and manual allows children on both sides. For example, one tile with alignment to the center:

TimelineTile(
  alignment: TimelineAlign.center,
  endChild: Container(
    constraints: const BoxConstraints(
      minHeight: 120,
    ),
    color: Colors.lightGreenAccent,
  ),
  startChild: Container(
    color: Colors.amberAccent,
  ),
);

When providing children to the vertical tile, the height will be as minimum as possible, so you can control it with a height constraint (at least minHeight). This way the tile knows how to size it properly.

Centered Tile

If the axis is horizontal, the things are the opposite. The width will be as minimum as possible, so you can control it with a width constraint (at least minWidth). This way the tile knows how to size it properly.

TimelineTile(
  axis: TimelineAxis.horizontal,
  alignment: TimelineAlign.center,
  endChild: Container(
    constraints: const BoxConstraints(
      minWidth: 120,
    ),
    color: Colors.lightGreenAccent,
  ),
  startChild: Container(
    color: Colors.amberAccent,
  ),
);

Horizontal Centered Tile

Manual aligning the idicator

With TimelineAlign.manual you can provide the lineXY, which allows you to specify a value from 0.0 to 1.0, that represents a size percentage. For example, aligning at 30% of the width or height:

TimelineTile(
  alignment: TimelineAlign.manual,
  lineXY: 0.3,
  endChild: Container(
    constraints: const BoxConstraints(
      minHeight: 120,
    ),
    color: Colors.lightGreenAccent,
  ),
  startChild: Container(
    color: Colors.amberAccent,
  ),
);

Manual align indicator

TimelineTile(
  axis: TimelineAxis.horizontal,
  alignment: TimelineAlign.manual,
  lineXY: 0.3,
  endChild: Container(
    constraints: const BoxConstraints(
      minWidth: 120,
    ),
    color: Colors.lightGreenAccent,
  ),
  startChild: Container(
    color: Colors.amberAccent,
  ),
);

Horizontal manual align indicator

Is it the first or the last?

You can decide if a tile is the first os the last in a timeline. This way you control whether a before or after line must be rendered.

First and last

Horizontal first and last

See the implementation here

Start to make a timeline

You can finally start to combine some tiles to make a Timeline. The flag hasIndicator can control whether an indicator should or shouldn't be rendered.

Timeline

Horizontal timeline

See the implementation here

Customize the indicator as you wish

The default indicator is a circle, and you can customize it as you wish. With IndicatorStyle you can change the color, the X/Y position based on values from 0.0 to 1.0 or give it a padding. You must explicitly provide its width (vertical) or height (horizontal) though.

Custom indicator

Horizontal custom indicator

See the implementation here

Give an icon to the indicator

With IconStyle you can provide an Icon to be rendered inside the default indicator.

Icon indicator

Horizontal icon indicator

See the implementation here

Or provide your custom indicator

With the indicator parameter you can customize the tile with your own indicator. However, you must control its size through both width and height parameters.

Custom indicator

Horizontal custom indicator

See the implementation here

Customize the tile's line

With LineStyle you can customize both beforeLine and afterLine.

Custom line

Horizontal custom line

See the implementation here

Connect tiles with TimelineDivider

The TimelineDivider widget allows you to connect tiles that are aligned in different X/Y axis, when combined with TimelineAlign.manual.

Timeline divider

Timeline divider

See the implementation here

Comments
  • Add null-safety support

    Add null-safety support

    First of all, thanks a lot for this package.

    I have been in the process of migrating my app to dart 2.12.x-pre to get some basic null safety checks going. It would be nice if this package had a null safe version too. See https://dart.dev/null-safety/migration-guide

    opened by ErliSoares 4
  • Compatibility with Font Awesome Icons

    Compatibility with Font Awesome Icons

    Basically, the problem is Font Awesome Icons are not displaying. Example attached. I tried with another renderer, but that's not displaying other icons either.

    image

    opened by ervindobri 3
  • Alignment setting for indicator

    Alignment setting for indicator

    Take vertical timelineTile for example, I need the indicator to alignment at the start of it's child. By default, indicator is center aligned. Allow users to decide indicator alignment to its child is very necessary.

    This is a nice library. thanks.

    opened by Nerogee 3
  • How to Increase the Progress bar or Timeline?

    How to Increase the Progress bar or Timeline?

    I know it might be a silly question but I cannot find any reference on how to increase that bar, I can make it lets say Delivery app Timeline but how to increase the status of it without making the user refresh or restart the app. Do I have to rebuild that widget everytime? Or is their an selected Index Parameter by which I can update it easily as soon as data is received...

    My situation is that I have a carousel and below that is the timeline and I want as soon as carousel item change it should change the timeline status whether decrease or increase.

    Thanks in advance.

    opened by prateekmedia 3
  • MaterialDesignIcons do not work

    MaterialDesignIcons do not work

    I am using https://pub.dev/packages/material_design_icons_flutter to have more icons.

    Sadly it breaks. No idea why.

    Probably somehow related to the way the font is acquired.

    Using a custom indicator now.

    indicatorStyle: IndicatorStyle(
                              width: 40,
                              color: Colors.purple,
                              padding: const EdgeInsets.all(8),
                              iconStyle: IconStyle(
                                color: Colors.white,
                                iconData: MdiIcons.delete,
                              ),
                            ),
    

    image

    waiting for costumer 
    opened by nstrelow 3
  • Horizontal timeline

    Horizontal timeline

    Issue to evaluate the implementation of a horizontal mode:

    O ---- O ------- O --- O

    Would this be useful? What are the features this mode should have? What are the use cases?

    enhancement 
    opened by JHBitencourt 3
  • Connect the lines

    Connect the lines

    How do I connect the lines between two timelines. For eg: how to make the line continous in the delivery timeline? Currently it has a gap between two tiles.

    waiting for costumer 
    opened by helloalbin 2
  • Custom indicator with package avatar_glow?

    Custom indicator with package avatar_glow?

    Thanks for this great package..

    Is there any reason animation on an indicator should not work? For example i'm using avatar_glow (from pub.dev) to wrap a custom indicator and i'm unable to get the indicator to pulse (able to have avatar_glow working elsewhere).

    Should there be any reason that does not work wrapping indicator?

    Thank you.

    waiting for costumer 
    opened by nholmvio 2
  • Update indicator padding calc

    Update indicator padding calc

    Indicator padding issue, Indicator size gets smaller as it gets closer to the edge.

    Example

    indicatorStyle: IndicatorStyle(
            width: 30,
            height: 30,
            indicatorY: 0~1.0
    ...
    

    | indicatorY | image | |---|:---:| |0|스크린샷 2020-08-02 오후 5 46 52| |0.5|스크린샷 2020-08-02 오후 5 47 20| |1|스크린샷 2020-08-02 오후 5 47 33|

    opened by hysuki 2
  • Make iconStyle a widget

    Make iconStyle a widget

    This way, users can have the option to even tap the icon in the indicator

    or im not sure how you would do this but considering there is already an indicator property which is a widget, perhaps a callback property so that users who want to use the default indicator will be able to execute call back code when that indicator widget is clicked.

    duplicate 
    opened by chitgoks 2
  • circular progress indicator not working inside custom indicator widget

    circular progress indicator not working inside custom indicator widget

    I have tried running a circular progress indicator inside custom indicator widget but it remains static... Basically what i need is like in Example Horizontal Timelines

    Code
    TimelineTile(
                      alignment: TimelineAlign.manual,
                      lineXY: 0,
                      isFirst: true,
                      endChild: Padding(
                        padding: const EdgeInsets.all(24),
                        child: Text(
                          'Order Requested',
                          style: TextStyle(color: goldenColor),
                        ),
                      ),
                      hasIndicator: true,
                      indicatorStyle: IndicatorStyle(
                        width: 35,
                        height: 35,
                        drawGap: true,
                        padding: const EdgeInsets.all(15),
                        color: goldenColor,
                        indicator: Container(
                          height: 20,
                          width: 20,
                          color: primaryAppColor,
                          child: Center(
                            child: Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: CircularProgressIndicator(
                                backgroundColor: goldenColor,
                                strokeWidth: 3.0,
                                color: goldenColor,
                              ),
                            ),
                          ),
                        ),
                      ),
                      /*startChild: Container(
                    color: Colors.amberAccent,
                  ),*/
                    )
    
    opened by Anas-jed 1
  • Horizotal timeline for video stream with post-request

    Horizotal timeline for video stream with post-request

    Hi :) First of all, thanks you for such great package. After all these days of seraching, it seems to me I found the right place to ask.

    So I would like to create the timeline (or something like archive) for my videostream. The issue is quite non-trivial and hard, because videostream dosen't have the end. I could say, it is infinite videostream if we would scroll it back. Also the timeline should be under the videostream and I would like to have acess to it by double tap. So my question is could I customize it like I described above? And could I make the post-request to put two timestapms? Can these package work with API-request?

    opened by ingvilow 0
  • Making the lines rounded at the edges

    Making the lines rounded at the edges

    I want to know, whether we can make the connector lines edges as rounded?

    Current Implementation

    Screenshot 2021-11-16 at 8 54 15 PM

    Expected Implementation

    Screenshot 2021-11-16 at 9 03 07 PM

    I tried to play with LineStyle but couldn't find anything on that. Any suggestions input would be appreciated here.

    opened by rohan-tide 1
  • one side

    one side

    how can we make one side im getting indicatorbuilder and connectors in millde. how can i make in one side . i removed oppositeContentsBuilder but still space is there in starting. how can i remove that?

    opened by Harsh4598 0
Releases(2.0.0)
  • 2.0.0(Mar 10, 2021)

  • 1.0.0(Sep 16, 2020)

    [1.0.0]

    *** Breaking Changes ***

    API changes to support both vertical and horizontal timeline.

    1. TimelineAlign changes:
    • TimelineAlign.left renamed to TimelineAlign.start
    • TimelineAlign.right renamed to TimelineAlign.end
    1. Added TimelineAxis to control the axis.

    2. TimelineTile changes:

    • new parameter TimelineAxis axis
    • rightChild renamed to endChild
    • leftChild renamed to startChild
    • lineX renamed to lineXY
    • topLineStyle renamed to beforeLineStyle
    • bottomLineStyle renamed to afterLineStyle
    1. LineStyle changes:
    • width renamed to thickness
    1. IndicatorStyle changes:
    • indicatorY renamed to indicatorXY
    1. TimelineDivider changes:
    • added parameter axis to support both axis
    Source code(tar.gz)
    Source code(zip)
  • 0.1.2(Jun 8, 2020)

  • 0.1.1(Jun 7, 2020)

It is too hard to build coherent and accessible themes with the right colors. This should help.

Color Studio It is hard to choose colors. Most color pickers give you 16 million colors and ask you to pick one. So many options, in fact, that your c

Bernardo Ferrari 372 Dec 22, 2022
A flutter package to help you beautify your app popups.

flutter_beautiful_popup 中文 A flutter package to help you beautify your app popup, can be used in all platform.Live Demo. Preview: Getting Started Add

朱嘉伟 568 Dec 30, 2022
modern e-commerce store built in flutter with help of GetX.

Shoe Commerce Modern looking shoe store app built in flutter and help of GetX :) Design source: https://www.figma.com/community/file/11473970061435204

ƳƠƲƧƠƑ 6 Nov 24, 2022
A textField widget to help display different style pin

pin_input_text_field 中文版点我 PinInputTextField is a TextField widget to help display different style pin. It supports all the platforms flutter supports

Tino 324 Jan 4, 2023
Build Beautiful UIs with Flutter Widgets

I learnt this following thing from this project How to create Stateless Widgets What is the difference between hot reload and hot refresh and running

Chitraarasu.k 2 Dec 31, 2021
A simple Flutter component capable of using JSON Schema to declaratively build and customize web forms.

A simple Flutter component capable of using JSON Schema to declaratively build and customize web forms.

null 3 Oct 2, 2022
This is a simple movies app build it with flutter

Movies App ?? This is a simple app build it with flutter. Features: ?? Get movies from themoviedb.org Search movies See details movies and casting Too

Tony Gonzalez 2 Feb 1, 2021
Build flexible layouts with constraints, Similar to Android ConstraintLayout

Flutter ConstraintLayout Build flexible layouts with constraints, Similar to Android ConstraintLayout. No matter how complex the layout is and how dee

fangbing chen 247 Jan 5, 2023
A flutter package which makes it easier to display the difference between two images.

?? Before After A flutter package which makes it easier to display the differences between two images.. The source code is 100% Dart, and everything r

Sahil Kumar 741 Dec 30, 2022
A flutter package for building card based forms.

Card Settings NOTE: THIS IS EFFECTIVELY NULLSAFE BUT CANNOT REFLECT THIS UNTIL cupertino_settings IS UPGRADED. A flutter package for building settings

CodeGrue 445 Dec 26, 2022
A powerful & easy to use timeline package for Flutter! 🚀

A powerful & easy to use timeline package for Flutter! ?? Caveat: This package is an early stage. Not enough testing has been done to guarantee stabil

Chulwoo Park 566 Dec 30, 2022
This Dart package offers developers a streamlined library of Flutter widgets, useful for expanding widgets and text views, when users interact with them.

This Dart package offers developers a streamlined library of Flutter widgets, useful for expanding widgets and text views, when users interact with them.

Jesús Rodríguez 44 Dec 6, 2022
A Flutter package that provides an Emoji picker widget with 1500+ emojis in 8 categories.

emoji_picker_flutter Yet another Emoji Picker for Flutter ?? Note: This package is based on emoji_picker which has been deprecated and not maintained

Stefan Humm 99 Dec 24, 2022
A Flutter package that enables users to resize the internal widgets by dragging.

resizable_widget ResizableWidget enables users to resize the internal widgets by dragging. This package contains simple APIs, but if needed, you can c

null 35 Dec 2, 2022
A flutter package to display a country, states, and cities. In addition it gives the possibility to select a list of countries, States and Cities depends on Selected, also you can search country, state, and city all around the world.

A flutter package to display a country, states, and cities. In addition it gives the possibility to select a list of countries, States and Cities depends on Selected, also you can search country, state, and city all around the world.

Altaf Razzaque 25 Dec 20, 2022
A flutter package that contains a collection of icon decoration tools (i.e. gradient, opacity) and icon transition features with cool animation effects.

Advanced Icon A flutter package that contains a collection of icon decoration tools (i.e. gradient, opacity) and icon transition features with cool an

Ankit Mishra 8 Dec 24, 2021
A new Flutter package support scroll to index for Listview, Gridview and NestedScrollView

easy_scroll_to_index A new Flutter package support scroll to index for Listview, Gridview and NestedScrollView Author: DinhVanHung Demo Example: Displ

Dinh Hung 4 Nov 19, 2021
Flutter package - Animated Flip Card

Animated Flip Card Animated Flip Card package lets you add an animated flip card to your Flutter app that hide and show more informations. Features Th

Ulfhrafn 8 Dec 4, 2022
A flutter port of Cardidy, a package to validate or identify card numbers & cvv with ease.

Flutter Cardidy A plugin to validate or identify card numbers & cvv with ease. This flutter package will help you validate card numbers or CVVs and id

Heyramb Narayan Goyal 1 Nov 28, 2021