TabBottomSlider In Flutter

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')),
           ],
         ),
       );
 }