Flutter Tab Layout using Tabcontroller
Nowadays working with tabs using tabcontroller flutter is a common pattern, You can see tabs in many applications. Flutter has included an easy way to integrate tabs in the Application.
Requirement
For Creation of tabs we need some following steps.
- Create TabController
- Create tabs
- Content of tab
TabController
For controlling the tabs we need this controller. Here we need to add the length of the tab, which means how many tabs you needed in your app. For Adding tabs in the controller you need to add them in the child tag. You can use the DefaultTabController widget or can create your own.
Syntax: Below is the syntax for TabController.
DefaultTabController( // The number of tabs / content sections to display. length: 3, child: // Complete this code in the next step. );
Tabs Creations
As we have created TabController now it’s time for adding tabs init. Flutter has created an easy way for creating the tabs using TabBar and Tab Widget.
Syntax: See below syntax for getting an understanding of how it works.
DefaultTabController( length: 3, child: Scaffold( appBar: AppBar( bottom: TabBar( tabs: [ Tab(text: 'Tab1'), Tab(text: 'Tab2'), Tab(text: 'Tab3'), ], ), ), ), );
Here I’ve added three text tabs, You can create as you want.
Content Creation of Each Tab
We are done with two steps, now it’s time to add the content to each tab with the help of TabBarView. You can add a new class or text or whatever you want to show in tabs. Here I’ve created one Tab Content screen from which I am showing text, You can add your content there, also Icon is there please check the below code.
TabBarView( children: [ new TabContentScreen('Tab1'), new TabContentScreen('Tab2'), Icon(Icons.tag_faces), ], )
Example
Now we are done with all steps, let’s see the below example for understanding Tab Layout clearly.
- tab_content_screen.dart : This is the class which handles tab content in my example. Check below code
import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; class TabContentScreen extends StatelessWidget { TabContentScreen(this.listType); final String listType; @override Widget build(BuildContext context) { return new Scaffold( body: new Center( child: new Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ new Text( listType, style: Theme.of(context).textTheme.display1, ), ], ), ), ); } }
- main.dart: The class which is showing tabs, please check below code.
import 'package:flutter/material.dart'; import 'package:flutter_tab_example/tab_content_screen.dart'; void main() { runApp(TabBarDemo()); } class TabBarDemo extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: DefaultTabController( length: 3, child: Scaffold( appBar: AppBar( bottom: TabBar( tabs: [ Tab(text: 'Tab1'), Tab(text: 'Tab2'), Tab(text: 'Tab3'), ], ), title: Text('Tabs Demo'), ), body: TabBarView( children: [ new TabContentScreen('Tab1'), new TabContentScreen('Tab2'), Icon(Icons.tag_faces), ], ), ), ), ); } }
Output
Below is the output of the above code.