FlutterでTabBarのタップ時の色とエフェクトを消してみた

はじめに

TabBarの実装をするときに、タブをタップした時のエフェクトが気になったりしたことはありますでしょうか？
視覚的にタップしたことがわかる点だととてもいいと感じることができますが、個人開発で作成している「FoodGram」のアプリではできるだけエフェクトは使いたくないと考えていました。

個人開発のちょっとした紹介

個人開発で「FoodGram」というアプリを開発しています。

FoodGramは、世界中のユーザーと食の楽しさを共有できるフードシェアアプリです。美味しい料理やお気に入りのグルメスポットを記録・共有しながら、みんなでグローバルな「フードマップ」を作りましょう🍜。

「FoodGram」は、フードシェアアプリとなっており、あなたの好きなレストランの食事をぜひこのアプリで共有していただけると嬉しいです!!

TabBarのエフェクトを無効化する

ポイントはこの2つになります。

splashFactory: NoSplash.splashFactory, // リップル無効化
overlayColor: WidgetStateProperty.all(Colors.transparent), // タップ時の色を透明に

最終的なコード

色々手を加えていますが、ぜひ参考にしていただけると幸いです。

bottom: TabBar(
  indicatorWeight: 1,
  automaticIndicatorColorAdjustment: false,
  unselectedLabelColor: Colors.grey,
  labelColor: Colors.black,
  indicatorColor: Colors.black,
  indicatorSize: TabBarIndicatorSize.tab,
  splashFactory: NoSplash.splashFactory,
  overlayColor: WidgetStateProperty.all(Colors.transparent),
  enableFeedback: true,
  tabs: <Widget>[
    Tab(
      icon: Icon(Icons.dinner_dining, size: 30),
      height: 38,
    ),
    Tab(
      icon: Icon(Icons.restaurant_menu, size: 30),
      height: 38,
    ),
  ],
),

実装したUI

実際にタブにエフェクトが表示しないようになっていると思います。やったね。

最後に

この内容については自分だけではなく、知り合いのJboyさんとのもくもく会にて実装できました。本当にありがとうございます🙇