Flutter TabBar 标签栏背景颜色、点击水波纹颜色配置

题记
—— 执剑天涯，从你的点滴积累开始，所及之处，必精益求精。

Flutter是谷歌推出的最新的移动开发框架。

【x1】微信公众号的每日提醒随时随记每日积累随心而过文章底部扫码关注

【x2】各种系列的视频教程免费开源关注你不会迷路

【x3】系列文章百万 Demo 随时复制粘贴使用

如下图所示，默认情况下使用 TabBar来实现的标签栏，是有点击水波纹效果以及使用的默认配置的背景颜色。

而在 App 开发的很多默认的使用场景中，多多少少是满足不了我们的需要的，如下图修改后的颜色效果。

1 测试 Demo 中 TabBar 应用在 AppBar 中

页面的主结构是通过 Scaffold 来搭建的，通过 TabBar 与 TabBarView 联动实现的效果。

class TestTabBarHomePage extends StatefulWidget {@overrideState<StatefulWidget> createState() {return SliderHomePageState();}
}class SliderHomePageState extends State with SingleTickerProviderStateMixin {///Tab 与 TabView 联动使用的控制器TabController tabController;//当前显示页面的int currentIndex = 0;//点击导航项是要显示的页面final pages = [Text("首页"), Text("发现"), Text("动态"), Text("我的")];@overridevoid initState() {///初始化，这个函数在生命周期中只调用一次super.initState();tabController = new TabController(length: pages.length, vsync: this);}@overrideWidget build(BuildContext context) {return new Scaffold(appBar: AppBar(title: Text("测试 Tab "),bottom: buildPreferredSize(),),body: new TabBarView(controller: tabController, children: pages),);}... ...
}

AppBar 的bottom 需要接收一个 PreferredSizeWidget 类型的组件，TabBar 就是继承于此，不过在这里使用到了 PreferredSize ，这样的好处是我们可以在 AppBar 的bottom 使用其他任意的组件：

  PreferredSize buildPreferredSize() {return PreferredSize(preferredSize: Size(0, 84),child: buildTabBar(),//child: buildTheme(),);}

  Widget buildTabBar() {return new TabBar(controller: tabController,tabs: <Tab>[new Tab(text: "首页", icon: new Icon(Icons.home)),new Tab(text: "发现", icon: new Icon(Icons.find_in_page)),new Tab(text: "动态", icon: new Icon(Icons.message)),new Tab(text: "我的", icon: new Icon(Icons.person)),],indicatorWeight: 0.1,);}

这样使用的 TabBar 是使用了默认配置的主题中的点击相关的颜色，如果需要修改，需要结合 Theme 来做。

2 通过 Theme 来个性 TabBar 的颜色

  Theme buildTheme() {return Theme(data: ThemeData(///默认显示的背景颜色backgroundColor: Colors.blue[500],///点击的背景高亮颜色highlightColor: Colors.blueGrey[600],///点击水波纹颜色splashColor: Color.fromRGBO(0, 0, 0, 0),),child: new TabBar(controller: tabController,tabs: <Tab>[new Tab(text: "首页", icon: new Icon(Icons.home)),new Tab(text: "发现", icon: new Icon(Icons.find_in_page)),new Tab(text: "动态", icon: new Icon(Icons.message)),new Tab(text: "我的", icon: new Icon(Icons.person)),],indicatorWeight: 0.1,),);}

以小编的性格，要实现百万Demo随时复制粘贴肯定是需要源码的

完整源码在这里

当然以小编的性格，肯定是要有视频录制的，目前正在录制中，你可以关注一下西瓜视频 — 早起的年轻人随后会上传