やりたいこと
図のように、画像データをタブに使用して、活性・非活性を切り替える。
アイコンやテキストを使う場合は、下記を参考に作成できるが、凝った画像データでタブの切り替えを表現しようとするとひと工夫必要となる。
気を付けるポイント
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), ); },) );
ソースコード
おいときます。