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), ]), ) )