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
(run it now!)
simple examplemore documentation available at github
Sponsors
Also check out...
references
https://www.pinterest.com/official_softmarshmallow/flutter-timeline/