Flutter tutorial on Tabs || android iOS tutorial on tabs

In this blog we will be dealing with displaying tabs in flutter app if you are new to flutter do visit this blog to understand the basics of flutter programming practices.

Flutter tabs are display component which makes categorization of things much flexible in a single screen rather than using multiple screens.

Most of the apps use them to categorize products for example food delivery apps like swiggy, zomato, uber apps use these tabs also many other apps do.

So as we are dealing with flutter a single code base for both android and iOS this tutorial gonna be much excited as you may experience both the platforms at once isn’t it.

Let’s get started…

 

Flutter Tabs

main.dart

The main class consists of the first page coding or landing page code where we code our flutter tabs.

Declaring a DefaultTabController in Material App of class extending StatelessWidget

home: DefaultTabController(
  length: 3, 
),

 

then declare Scaffold in child of home section as..

child: Scaffold(
  appBar: AppBar(
    bottom: TabBar(
    
    ),
  ),

),

 

now declare flutter tabs inside TabBar

 

bottom: TabBar(
  tabs: [
    Tab(text: 'First',),
    Tab(text: 'Second',),
    Tab(text: 'Third'),
  ],
),
title: Text('Tabs'),

 

Here in tabs instead of text you can also specify icon for easy identification of module.

tabs: [
  Tab(icon: Icon(Icons.call,)),
  Tab(icon: Icon(Icons.email,)),
  Tab(icon: Icon(Icons.message,)),
],

 

also both text and icon depending on requirement.

tabs: [
  Tab(text: 'First',icon: Icon(Icons.call,)),
  Tab(text: 'Second',icon: Icon(Icons.email,)),
  Tab(text: 'Third',icon: Icon(Icons.message,)),
],

 

in body section declare the classes corresponding to the tabs

Note: Make sure they are in same order specified above so as to avoid confusion.

 

body: TabBarView(
  children: [
    Tab1(),
    Tab2(),
    Tab3()
  ],
),

 

Tab1:

Create a tab1 and add content accordingly

class Tab1 extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(

      body: Center(
        child: Container(
          child: Text('Tab1'),
        ),
      ),
    );
  }

}

 

Following the above code make other two tabs as this is example i am recreating same.Not only tabs you can add the functionality as required.

Like you can make a phone call, send a message and also redirect to a website for more information.

 

Tab2

class Tab2 extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(

      body: Center(
        child: Container(
          child: Text('Tab2'),
        ),
      ),
    );
  }

}

 

Tab3

class Tab3 extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(

      body: Center(
        child: Container(
          child: Text('Tab3'),
        ),
      ),
    );
  }

}

 

Output :

This screen depicts the usage of flutter tabs

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

If you have any query in the tutorial on flutter tabs let us know in the comment section below also do like and share this tutorial for more interesting updates.