TabBottomSlider In Flutter :
Content Overview
- BottomTabBar only Icon.
- BottomTabBar disbale slider.
- BottomTabBar Icon with Text .
- This program is bottom only the icon display and sliding not pages.
- TabBarView one of the propety physics is sliding page (ScrollPhysics) or not (NeverScrollableScrollPhysics).
- BottomTabBar display both Icon and Text use below line
Tab(text: “Options”, icon: Icon(Icons.settings)),
TabController
TabController(vsync: this, length: 3, initialIndex: 0)
1) vsync : this
2) length: Number of tab display.
3) initialIndex: Current selected tab.
- Note: When TabController use then DefaultTabController not used in your program.
Screenshhot :

Program :
import 'package:flutter/material.dart'; class TabBottomPage extends StatefulWidget { @override _TabBottomState createState() => new _TabBottomState(); } class _TabBottomState extends State with SingleTickerProviderStateMixin { TabController _tabController; @override void initState() { super.initState(); _tabController = new TabController(vsync: this, length: 3); _tabController.addListener(_handleTabSelection); } void _handleTabSelection() { setState(() {}); } @override Widget build(BuildContext context) { return new MaterialApp(home: tabCreate()); } tabCreate() => Scaffold( backgroundColor: Colors.white, bottomNavigationBar: new TabBar( controller: _tabController, tabs: [ Tab( icon: new Icon(Icons.home, color: _tabController.index == 0 ? Colors.grey : Colors.orange), ), Tab( icon: new Icon(Icons.call, color: _tabController.index == 1 ? Colors.grey : Colors.orange), ), Tab( icon: new Icon(Icons.help_outline, color: _tabController.index == 2 ? Colors.grey : Colors.orange), ), ], labelColor: Colors.yellow, unselectedLabelColor: Colors.blue, indicatorSize: TabBarIndicatorSize.label, indicatorPadding: EdgeInsets.all(5.0), indicatorColor: Colors.grey, ), body: TabBarView( controller: _tabController, children: [ new Container(child: Text('Empty')), new Container(child: Text('Empty')), new Container(child: Text('Empty')), ], ), ); }