flutter中tabbar的tab背景顏色設置

關鍵代碼

bottom: PreferredSize( preferredSize: Size.fromHeight(48), child: Material( //這里設置tab的背景色 color: Colors.green, child: TabBar( // indicator: ColorTabIndicator(Colors.black),//選中時標簽顏色 indicatorColor: Colors.black,//選中時下划線顏色,如果使用了indicator這里設置無效 controller: _tabController, labelColor: Colors.white, unselectedLabelColor: Colors.yellow, tabs: _tabs.map((item)=>Tab(text: item,)).toList(), ), ), ) ) 

tabbar中的tab的背景顏色取的實際是AppBar的主題色，所以我們將tabbar放在Material中來重置了主題色，變成我們想要的背景色.

完整代碼:

import 'package:flutter/material.dart'; class TabbarBgColorTest extends StatefulWidget{ @override State<StatefulWidget> createState() { return _TabbarBgColorTesttate(); } } class _TabbarBgColorTesttate extends State<TabbarBgColorTest> with SingleTickerProviderStateMixin{ int _selectedIndex = 0; GlobalKey<ScaffoldState> _key = GlobalKey(); final List<String> _tabs = ["新聞", "歷史", "圖片"]; TabController _tabController; // PageController _pageController; @override void initState() { super.initState(); _tabController = TabController(length: _tabs.length, vsync: this); _tabController.addListener((){ print("selected tabBar ${_tabs[_tabController.index]}"); }); } @override Widget build(BuildContext context) { return Scaffold( key: _key, appBar: AppBar( title: Text("ScaffoldTest"), //TabBar布置 bottom: PreferredSize( preferredSize: Size.fromHeight(48), child: Material( color: Colors.green, child: TabBar( // indicator: ColorTabIndicator(Colors.black),//選中標簽顏色 indicatorColor: Colors.black,//選中下划線顏色,如果使用了indicator這里設置無效 controller: _tabController, labelColor: Colors.white, unselectedLabelColor: Colors.yellow, tabs: _tabs.map((item)=>Tab(text: item,)).toList(), ), ), ) ), body: TabBarView( controller: _tabController, children: _tabs.map((item) => Container( color: Colors.blueGrey, alignment: AlignmentDirectional.center, child: Text(item), )).toList(), ), bottomNavigationBar: BottomNavigationBar( items: [ BottomNavigationBarItem( title: Text("Home"), icon: Icon(Icons.home) ), BottomNavigationBarItem( title: Text("Business"), icon: Icon(Icons.business) ), BottomNavigationBarItem( title: Text("School"), icon: Icon(Icons.school) ) ], currentIndex: _selectedIndex, fixedColor: Colors.green, onTap: (index){ setState(() { _selectedIndex = index; }); print(_selectedIndex); }, ) ); } }

作者：noonez
來源：簡書