【Flutter】TabウィジェットでTabBarに画像を使用する

やりたいこと

図のように、画像データをタブに使用して、活性・非活性を切り替える。

タブ

アイコンやテキストを使う場合は、下記を参考に作成できるが、凝った画像データでタブの切り替えを表現しようとするとひと工夫必要となる。

docs.flutter.dev

気を付けるポイント

TabControllerのanimationのvalueを取得して、その値に応じてタブが現在活性なのかどうかを判定することができる。

Tab(
    height: 80,
    //タブが切り替わると、タブ内部のアニメーションの値が変化する。
    icon: AnimatedBuilder(animation: _tabController!.animation!, builder: (BuildContext context, Widget? child) {
      return Image(
              fit: BoxFit.fitWidth,
              height: 72,
              //アニメーションに合わせて、活性画像と非活性画像を切り替える。
              image: (_tabController == null || _tabController!.animation!.value.round() == index)
                  ? AssetImage(activeImage)
                  : AssetImage(inactiveImage),
          );
    },)
  );

ソースコード

おいときます。

github.com