Flutter Tab Layout using Tabcontroller

You are currently viewing Flutter Tab Layout using Tabcontroller
Flutter Tab

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.

  1. Create TabController
  2. Create tabs
  3. 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.

See also  Material Bottom Sheet Implementation for Flutter

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.

Flutter Tab
Flutter Tab

Spread the love

Leave a Reply