A constructor
Const TabBar({Key Key, @required this.tabs,//WidgetList, TAB list, this.controller,// controller this.isScrollable: IndicatorWeight: 1,// Underline width: this. IndicatorWeight: 1,// Underline width: EdgeInsets. Zero,// Padding this.indicator,// Custom underline this.indicatorSize,// underline size this.labelColor,// Text color in TAB Enclosing labelStyle, / / TAB within the text style enclosing unselectedLabelColor, / / not selected TAB within the text color enclosing unselectedLabelStyle, / / not selected TAB within the text style})Copy the code
The sample

code
Class _MyHomePageState extends State<MyHomePage> {final List<Tab> Tabs = <Tab>[Tab(text: 'homepage ',icon: Icon (the Icons. Add_alarm),), the Tab (text: 'life'), the Tab (the text: "healthy"), the Tab (text: 'cycling'), the Tab (text: 'motorcycle), the Tab (text: 'the invincible'), the Tab (text: 'it will become'), the Tab (text: 'peacock king Ming),]; @override Widget build(BuildContext context) { return DefaultTabController( length: tabs.length, child: Scaffold( appBar: AppBar( backgroundColor: Colors.blue, title: Text("TabBar"), bottom:TabBar( tabs: tabs, isScrollable: true, indicatorColor: Colors.orange[400], labelColor: Colors.white, ), ), body: TabBarView( children: tabs .map((Tab tab) => Center(child: Container( width: 200, height: 200, child: tab, color: Colors.orange[200], ))) .toList()), ), ); }}Copy the code

Note:

  • TabBar and TabBarView need to be inside TabController
  • The children must be the same length