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: 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), ]), ) )
Example 3: 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), ]), ) )