Flutter Boring Tab to Cool Tab
The default tabs styles provided by the flutter is kind of boring. But It doesn’t say we cannot customize the look and the feel of the tab.
Best and easy customization can be done by changing the tab indicator. In this article, I will show you how to add 5 different tab styles for our next app.
First, we need to create a basic tab. In here I used DefaultTabController.You can assign DefaultTabController to a home parameter of the MaterialApp widget. For the child of DefaultTabController, you can use Scaffold with the appbar and the body. For the appBar you can assign Appbar widget to make header part of the tabs. For the body, you can add the TabBarView widget with the 3 child Widgets to show the item when you click the tabs.
Check the full code for the default tab.
DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
elevation: 0,
bottom: TabBar(indicatorSize: TabBarIndicatorSize.label, 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),
]),
)
)1.Round Corners
In here we are going to add a round corner style to the tab indicator. First of all, I will give a brief description of the param which we are going to modify.
Round corner style can be done by adding BoxDecoration with borderRadius 50.
Then I will add a red colour border to each tab headers. When you selected the tab It will fill with the red colour. If you are not interested in the border, you can just remove the border adding the part and keep it simple.
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),
]),
))2.Round Corners with Gradient
In here I removed the style which I was added to each tab. After that added a gradient to BoxDecoration. In here I used LinearGradient with two colours. You can change the gradient-based on your preferences.
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),
]),
)
)3.Square Style
Square style can be done by changing the small code in the previous one. BorderRadius of the boxDecoration can be changed by adding 10 for both leftTop and rightTop. Then I change the appbar backgroundColor to the red to make it look better.
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),
]),
)
)4.Diamond Style
Diamond tab style can be done by adding ShapeDecoration with BeveledRectangleBorder for the shape parameter.BeveledRectangleBorder will allow you to add flatten corner instead of round corners.
The line segments that connect the rectangle’s four sides will begin and at locations offset by the corresponding border radius, but not farther than the side’s center. If all the border radii exceed the sides’ half widths/heights the resulting shape is diamond made by connecting the centers of the sides.
BeveledRectangleBorder — flutter.dev
In here I used borderRadius as 10 to make it look like this.
DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
backgroundColor: Colors.white,
elevation: 0,
bottom: TabBar(
unselectedLabelColor: Colors.redAccent,
indicatorPadding: EdgeInsets.only(left: 30, right: 30),
indicator: ShapeDecoration(
color: Colors.redAccent,
shape: BeveledRectangleBorder(
borderRadius: BorderRadius.circular(10),
side: BorderSide(
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),
]),
)
)5.Diamond Style 2
Likewise, by changing the borderRadius of the BeveledRectangleBorder, you can achieve different styles. In here I used borderRadius as 20. You can try different styles by changing this borderRadius value.
DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
backgroundColor: Colors.white,
elevation: 0,
bottom: TabBar(
unselectedLabelColor: Colors.redAccent,
indicatorPadding: EdgeInsets.only(left: 30, right: 30),
indicator: ShapeDecoration(
color: Colors.redAccent,
shape: BeveledRectangleBorder(
borderRadius: BorderRadius.circular(20),
side: BorderSide(
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),
]),
)
)I hope you get a better understanding of how to change the tab style by a few lines of code. If you are like to watch this in action, please watch the video mentioned below. 🤗
References
https://flutter.dev/docs/cookbook/design/tabs https://api.flutter.dev/flutter/painting/BeveledRectangleBorder-class.html
Originally published at https://mightytechno.com on July 10, 2019.
