appbar tabs flutter code example

Example 1: 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 2: 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<MyStatefulWidget>{

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 3: tab design in flutter

DefaultTabController(        length: 3,        child: Scaffold(          appBar: AppBar(            backgroundColor: Colors.white,            elevation: 0,            bottom: TabBar(                unselectedLabelColor: Colors.redAccent,                indicatorSize: TabBarIndicatorSize.tab,                indicator: BoxDecoration(                    gradient: LinearGradient(                        colors: [Colors.redAccent, Colors.orangeAccent]),                    borderRadius: BorderRadius.circular(50),                    color: Colors.redAccent),                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),          ]),        )     )

Tags:

Misc Example