Flutter 進捗状況などのタイムラインを簡単に実装できるライブラリ

今回はアプリの初期設定の進捗を表示やフードデリバリーサービスや荷物の配送サービスなどで、自分の頼んだものがどこにあるのかなど見れるタイムラインの画面を簡単に作れるライブラリの紹介です。
(↓こんな画面のようなもの)

timelinesというライブラリです。

timelines | Flutter package

A powerful & easy to use timeline package for Flutter. All UI components in this package are separate widgets.

pub.dev

こちらのライブラリでは縦向きの時系列で表示するようなデザインのものもあれば、横向きのデザインのものもあります。

カスタマイズ性もあり、インジケーターの形や線の種類を選べたりします。

実装も難しくなく

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

基本形はこのような形で実装できます。

また、TimelineThemeというのを使用し、カスタマイズしていくことが可能です。

タイムラインのような画面は1から自分で作るとなかなか面倒だったりするので、こうしたライブラリがあるととても便利ですね。