TabBar is a row of horizontal tabs, you can switch back and forth, the effect map
TabBar is generally used together with TabBarView.
TabBarView is used to select different TabBars.
TabBarView displays the corresponding View
TabBarView property description
|
class TabBarDemo extends StatefulWidget { @override State<StatefulWidget> createState() => _TabBar(); } class _TabBar extends State<TabBarDemo> { final List<String> _tabValues = [ 'Tab1', 'Tab2', 'Tab3', 'Tab4', 'Tab5', 'Tab6', 'Tab7', 'Tab8', ]; TabController _controller; @override void initState() { super.initState(); _controller = TabController( length: _tabValues.length, vsync: ScrollableState(), ); } @override Widget build(BuildContext context) { // TODO: implement build return Scaffold( appBar: AppBar( backgroundColor: Colors.pink, title: Text('TabBar'), bottom: TabBar( tabs: _tabValues.map((f) { return Text(f,style: TextStyle(fontSize: 20),); }).toList(), controller: _controller, indicatorColor: Colors.grey, isScrollable: true, labelColor: Colors.white, unselectedLabelColor: Colors.white54, indicatorWeight: 5.0, labelStyle: TextStyle(height: 2), ), ), body: TabBarView( controller: _controller, children: _tabValues.map((f) { return Center( child: Text(f,style: TextStyle(fontSize: 80,color: Colors.pink),), ); }).toList(), ), ); } } |
