GitLocker: The Coding Marketplace

Description:

flutter timeline

framework: flutter
platform: Android, iOS, Web, macOS, Linux, Windows
tags: flutter, timeline, flutter timeline, timeline tile
title: 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
copied to clipboard
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);
});
}
copied to clipboard
using offset
Widget _buildTimeline() {
return Timeline(
indicatorSize: 56,
events: events,
altOffset: Offset(0, -24) // set offset
);
}
copied to clipboard
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);
}
copied to clipboard
complex example #

simple example (run it now!) #

more documentation available at github
Sponsors #

Bridged (github)

Also check out... #
flutter_layouts
references #
https://www.pinterest.com/official_softmarshmallow/flutter-timeline/