tabbar in flutter code example

Example 1: tabs flutter example

DefaultTabController(
  length: 3,
  child: Scaffold(
    appBar: AppBar(
      bottom: TabBar(
        tabs: [
          Tab(icon: Icon(Icons.directions_car)),
          Tab(icon: Icon(Icons.directions_transit)),
          Tab(icon: Icon(Icons.directions_bike)),
        ],
      ),
    ),
  ),
);

Example 2: tab design in flutter

DefaultTabController(      length: 3,      child: Scaffold(        appBar: AppBar(          backgroundColor: Colors.white,          elevation: 0,          bottom: TabBar(              unselectedLabelColor: Colors.redAccent,              indicatorSize: TabBarIndicatorSize.label,              indicator: BoxDecoration(                  borderRadius: BorderRadius.circular(50),                  color: Colors.redAccent),              tabs: [                Tab(                  child: Container(                    decoration: BoxDecoration(                        borderRadius: BorderRadius.circular(50),                        border: Border.all(color: Colors.redAccent, width: 1)),                    child: Align(                      alignment: Alignment.center,                      child: Text("APPS"),                    ),                  ),                ),                Tab(                  child: Container(                    decoration: BoxDecoration(                        borderRadius: BorderRadius.circular(50),                        border: Border.all(color: Colors.redAccent, width: 1)),                    child: Align(                      alignment: Alignment.center,                      child: Text("MOVIES"),                    ),                  ),                ),                Tab(                  child: Container(                    decoration: BoxDecoration(                        borderRadius: BorderRadius.circular(50),                        border: Border.all(color: Colors.redAccent, width: 1)),                    child: Align(                      alignment: Alignment.center,                      child: Text("GAMES"),                    ),                  ),                ),              ]),        ),        body: TabBarView(children: [          Icon(Icons.apps),          Icon(Icons.movie),          Icon(Icons.games),        ]),      ))

Example 3: tabbar flutter

indicatorSize

Example 4: flutter appbar actions with tabs

class MyStatefulWidget extends StatefulWidget{
@override
  MyStatefulWidgetState createState() => MyStatefulWidgetState();

  static MyStatefulWidgetState of(BuildContext context){
    return (context.inheritFromWidgetOfExactType(_MyInheritedStateContainer) as _MyInheritedStateContainer).data;
  }
}
class MyStatefulWidgetState extends State{

String variableCalledHello = "Hello World";
@override
  void initState() {
    super.initState();
  }
 @override
  Widget build(BuildContext context) {
   return new _MyInheritedStateContainer(data:this,child:/* Body here */);
  }
}
class _MyInheritedStateContainer extends InheritedWidget{
    _MyInheritedStateContainer({
Key key,
    @required Widget child,
    @required this.data,
  }) : super(key: key, child: child);

final MyStatefulWidgetState data;

 @override
  bool updateShouldNotify(_MyInheritedStateContainer oldWidget) {
    return true;
  }
}

Example 5: tab design in flutter

DefaultTabController(        length: 3,        child: Scaffold(          appBar: AppBar(            backgroundColor: Colors.redAccent,            elevation: 0,            bottom: TabBar(                labelColor: Colors.redAccent,                unselectedLabelColor: Colors.white,                indicatorSize: TabBarIndicatorSize.label,                indicator: BoxDecoration(                    borderRadius: BorderRadius.only(                        topLeft: Radius.circular(10),                        topRight: Radius.circular(10)),                    color: Colors.white),                tabs: [                  Tab(                    child: Align(                      alignment: Alignment.center,                      child: Text("APPS"),                    ),                  ),                  Tab(                    child: Align(                      alignment: Alignment.center,                      child: Text("MOVIES"),                    ),                  ),                  Tab(                    child: Align(                      alignment: Alignment.center,                      child: Text("GAMES"),                    ),                  ),                ]            ),          ),          body: TabBarView(children: [            Icon(Icons.apps),            Icon(Icons.movie),            Icon(Icons.games),          ]),        )     )