gridaco / flutter-timeline

⌚️ Flutter timelines

framework	platform	tags	title
flutter	Android, iOS, Web, macOS, Linux, Windows	flutter, timeline, flutter timeline, timeline tile	flutter timeline

flutter_timeline

a fully customizable & general timeline widget, based on real-world application references

• ✅ fully customizable indicator dot
• ✅ support spacing between indicator dot and lines
• ✅ support spacing between event (items) but leaving the line connected
• ✅ uses custom paint, but yet, indicator and body are fully customizable.
• ✅ 2 real-world demos
• ✅ L2R support
• ✅ anchor support
• ✅ global offset support
• ✅ item offset support
• ✅ supported & used by enterprise, constantly updated, used on production application.

Installation

dependencies:
  flutter_timeline: latest

usage

simple

  TimelineEventDisplay get plainEventDisplay {
    return TimelineEventDisplay(
        child: TimelineEventCard(
          title: Text("just now"),
          content: Text("someone commented on your timeline ${DateTime.now()}"),
        ),
        indicator: TimelineDots.of(context).circleIcon);
  }

  List<TimelineEventDisplay> events;

  Widget _buildTimeline() {
    return TimelineTheme(
        data: TimelineThemeData(lineColor: Colors.blueAccent),
        child: Timeline(
          indicatorSize: 56,
          events: events,
        ));
  }

  void _addEvent() {
    setState(() {
      events.add(plainEventDisplay);
    });
  }

using offset

Widget _buildTimeline() {
  return Timeline(
      indicatorSize: 56,
      events: events,
      altOffset: Offset(0, -24) // set offset
  );
}

using anchor & offset

  TimelineEventDisplay get plainEventDisplay {
    return TimelineEventDisplay(
        anchor: IndicatorPosition.top,
        indicatorOffset: Offset(0, 24),
        child: TimelineEventCard(
          title: Text("multi\nline\ntitle\nawesome!"),
          content: Text("someone commented on your timeline ${DateTime.now()}"),
        ),
        indicator: randomIndicator);
  }

complex example

simple example (run it now!)

more documentation available at github

Sponsors

Also check out...

flutter_layouts

references

https://www.pinterest.com/official_softmarshmallow/flutter-timeline/

flutter-timeline's Issues

Automatic spacing based on time of entries

I'm curious if there is a way to make the timeline adjust where items appear based on the gap in time between events. For example items that are five minutes apart might be spaced 5 px. Whereas items an hour apart would have more spacing say 20 px.

If this isn't something that can be done automatically in the library, I'd be any thoughts you had on how to manually do this in the app using the library.

Line margin does not works as intended

Line drawing logic is messed up, needs refactoring. current version will show up some missing points while drawing the line.

Please add null-safety

It save my life If this plugin can migrate null safety. Thank you

How to make Dashed Line

Hi there, thanks for this superb library, just want to know about if there is any away to make dashed stroke between items

Flutter 3.10.0 Error: The getter 'accentColor' isn't defined for the class 'ThemeData'.

Describe the bug
I can't run my project in Flutter 3.10.0

To Reproduce
run in Flutter 3.10.0

Expected behavior
no error shown

Screenshots

separate event item as a standalone widget

make timeline event & line painter as standalone widget for more usability

Please add a null safety support

Indicator size must be dynamic by default

The passed indicator size must be dynamic by default.

currently the indicator size is ignored, and resized by indicatorSize property.

support custom alt offset of line & points, make is as enum interface

like so.
altOffset: Offset(0, -5)

itemGap bigger than 24 wont work.

      return TimelineTheme(
          data: TimelineThemeData(lineColor: ThemeColors.grey400, itemGap: 24),
          child: Timeline(
            events: rows,
          ));

above code will create empty space between events

Possible to save events ?

Hello and thank you for this package that I searched. I work great for me but I don't found how to use sharedpreference to save event and load when I init the app. Thank you

Can we have null-safety support?

How to reverse timeline ?

Hello I don't find how to display most recent event on top and last on bottom.

thank you

line disappears when scrolling

related to flutter/flutter#42339 (comment)

Can your package work with a video_player to create the timeline?

Hi :)
Thanks you for such great package, and sorry if I have chosen the wrong topic (it is not a bug or a feature request. It is just a lame question)
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

TimelineEventDisplay#forceLineDrawing doesn't work

It doesn't seem to be referenced anywhere in the library code either...