In this blog, We are going to discuss about the TabBar. How the TabBar works. And why we use Tabbar. and we will discuss how to display a horizontal row of tabs and display a widget that corresponds to the currently selected tab. We will explain all these in a demo. Now let’s start.
Table of Contents :
Flutter:
“ Flutter is Google’s UI toolkit that helps you build beautiful and natively combined applications for mobile, web, and desktop in a single code base in record time ”
TabBar:
The TabBar is used mainly to navigate different screens in one screen. This is what you need first to build the TabBarController. There are two ways to do this. By using the DefaultTabbarController or by creating a TabController.
We mainly need 3 components to create this TabBar.
- Create a
TabController. - Create the tabs.
- TabBarView.
TabController: The TabController is used to control the movement between created tabs.
TabController(length: list.length, vsync: this);
Create Tabs: We need a scaffold to create a TabBar. It should have a bottom attribute. Tabs are a list of forms. This means that it is necessary to have as many tabs as you are making.
bottom: new TabBar(
tabs: <Widget>[
Tab(icon: Icon(Icons.cake)),
Tab(icon: Icon(Icons.android)),
Tab(icon: Icon(Icons.phone_android)),
],
),
TabView: When we press any TabBar using the TabView, we see a new page.
For Example, We can see the WhatsApp App as if we click any tab, then a different page appears on the different tabs.
Demo Module:
Code Implementation:
There are two buttons in this screen, which on clicking will navigate us to the result of the tabbar on the screen.
DefaultTabBarController:
In this screen, we have used the DefaultTabBarController for TabBar. The TabBar DefaultTabBarController is an inherited widget. It is used to share a TabController with a TabBar or TabBarView.If you are using the stateless widget. The best approach is to use DefaultTabController.And in TabBar we have used 3 different icons. On Tap its icon, we have shown different view in TabbarView.
Let us understand this with the help of a reference.
DefaultTabController(
length: 3,
child: new Scaffold(
appBar: new AppBar(
title: new Text("TabBar Widget"),
bottom: new TabBar(
tabs: <Widget>[
Tab(icon: Icon(Icons.cake)),
Tab(icon: Icon(Icons.android)),
Tab(icon: Icon(Icons.phone_android)),
],
),
),
body: new TabBarView(
children: <Widget>[
Container(
color: Colors.deepOrangeAccent,
child: new Center(
child: new Text(
"Cake",
style: textStyle(),
),
),
),
],
),
),
)
The DefaultTabController results can be seen in the image.
Custom TabController:
In this screen, a custom TabController is used in the TabBar. For This stateful widget is used.
Let us understand this with the help of a reference.
First of all create a Stateful Widget.which should be SingleTickerProviderStateMixin.
class CustomTabBarDemo extends StatefulWidget {
@override
_CustomTabBarDemoState createState() => _CustomTabBarDemoState();
}
class _CustomTabBarDemoState extends State<CustomTabBarDemo> with SingleTickerProviderStateMixin {
}
To create a tab in it, create a tab list and create an object of its TabController.
List<Widget> list = [
Tab(icon: Icon(Icons.android)),
Tab(icon: Icon(Icons.add_shopping_cart)),
Tab(icon: Icon(Icons.card_giftcard)),
Tab(icon: Icon(Icons.phone_android)),
];
//////////////////////////////////////////////
TabController _tabController;
Initalize the TabController inside the initState() method and also override it in the dispose() method.
@override
void initState() {
super.initState();
_tabController =
TabController(length:list.length, vsync: this);// initialise it here
}
@override
void dispose() {
_tabController.dispose();
super.dispose();
}
The CustomTabBar results can be seen in the image.
Code File:
I am posting the code of both examples. Which I have created as a demo in this blog.
DefaultTabBarController Code File:
import 'package:flutter/material.dart';
class TabBarDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
textStyle() {
return TextStyle(color: Colors.white, fontSize: 30.0);
}
return new DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
title:Text("TabBar Widget"),
bottom:TabBar(
tabs: <Widget>[
Tab(icon: Icon(Icons.cake)),
Tab(icon: Icon(Icons.android)),
Tab(icon: Icon(Icons.phone_android)),
],
),
),
body:TabBarView(
children: <Widget>[
Container(
color: Colors.deepOrangeAccent,
child:Center(
child:Text(
"Cake",
style: textStyle(),
),
),
),
Container(
color: Colors.blueGrey,
child:Center(
child:Text(
"Android",
style: textStyle(),
),
),
),
Container(
color: Colors.teal,
child:Center(
child:Text(
"Mobile",
style: textStyle(),
),
),
),
],
),
),
);
}
}
Custom TabBarController Code File:
import 'package:flutter/material.dart';
class CustomTabBarDemo extends StatefulWidget {
@override
_CustomTabBarDemoState createState() => _CustomTabBarDemoState();
}
class _CustomTabBarDemoState extends State<CustomTabBarDemo> with SingleTickerProviderStateMixin {
TabController _tabController;
@override
void initState() {
super.initState();
_tabController =
TabController(length:list.length, vsync: this);// initialise it here
}
@override
void dispose() {
_tabController.dispose();
super.dispose();
}
List<Widget> list = [
Tab(icon: Icon(Icons.android)),
Tab(icon: Icon(Icons.add_shopping_cart)),
Tab(icon: Icon(Icons.card_giftcard)),
Tab(icon: Icon(Icons.phone_android)),
];
textStyle() {
return TextStyle(color: Colors.black, fontSize:20.0);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
bottom: TabBar(
controller: _tabController,
isScrollable: true,
tabs:list,
indicator: UnderlineTabIndicator(
borderSide: BorderSide(width: 2.0,color:Colors.white),
insets: EdgeInsets.symmetric(horizontal:0.0)
),
// / indicatorPadding: EdgeInsets.all(0.0),
indicatorWeight: 4.0,
labelPadding: EdgeInsets.only(left:30.0, right:30.0),
),
title: Text('tabBar'),
),
body: TabBarView(
controller: _tabController,
children: [
Center(
child: Text(
'Cake',
style: textStyle(),
)),
Center(
child: Text(
'Cart',
style: textStyle(),
)),
Center(
child: Text(
'GiftCard',
style: textStyle(),
)),
Center(
child: Text(
'Phone',
style: textStyle(),
)),
],
),
);
}
}
Conclusion :
In this article, I have explained a TabBar widget demo, which you can modify and experiment with according to your own, this little introduction was from the TabBar widget from our side.
I hope this blog helps will provide you with sufficient information in Trying up the TabBar List widget in your flutter project. In this demo explain the TaBar widget in flutter. So please try it.
❤ ❤ Thanks for reading this article ❤❤
Feel free to connect with us
And read more articles from FlutterDevs.com
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
