Tabs in flutter

November 17, 2020

Tabs in flutter

Tab in flutter

Do you think how can we create a tabs in flutter?

It was really cool and easy to create a tabs in flutter.

In this blog we are created a tab using following widget

DefaultTabController
TabBar
Tab
TabBarView

Using this widget you can create a really cool tab bar. We are created a class for this name as

TabData

class TabData{
  String tabName;
  IconData icon;
  TabData({this.icon,this.tabName});
}

I have created a list for the TabData as variable name is tabs

List<TabData> tabs=[TabData(icon: Icons.directions_bike,tabName: "Bike"),
TabData(icon: Icons.directions_boat,tabName: "Boat"),
TabData(icon: Icons.directions_bus,tabName: "Bus"),
TabData(icon: Icons.directions_railway,tabName: "Railway"),
TabData(icon: Icons.directions_run,tabName: "Run"),
TabData(icon: Icons.directions_subway,tabName: "SubWay"),
TabData(icon: Icons.directions_walk,tabName: "Walk")

];

Full code:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue
      ),
      debugShowMaterialGrid: false,
      debugShowCheckedModeBanner: false,
      home: DefaultTabController(
        length: tabs.length, 
      child: Scaffold(appBar: AppBar(
        title: Text("Tab"),
      bottom: TabBar(
            // to scroll the tab you must pass this parameter otherwise error occurs 
        // if your tab is scrollable
        isScrollable: true,
        indicatorColor: Colors.red,
        indicatorSize: TabBarIndicatorSize.tab,
        tabs: tabs.map((e){
        return Tab(icon: Icon(e.icon),
        text: e.tabName,
        );
      }).toList(),),
      )

      ,body: TabBarView(children: tabs.map((e){
        return Container(
          margin: EdgeInsets.all(5),
          child: Card(
            elevation: 5,
            child: Center(child:Icon(e.icon,size: 80,),
        ),),
        );
      }).toList())
      ,),
      
      ),
      
      
    );
  }
}
List<TabData> tabs=[TabData(icon: Icons.directions_bike,tabName: "Bike"),
TabData(icon: Icons.directions_boat,tabName: "Boat"),
TabData(icon: Icons.directions_bus,tabName: "Bus"),
TabData(icon: Icons.directions_railway,tabName: "Railway"),
TabData(icon: Icons.directions_run,tabName: "Run"),
TabData(icon: Icons.directions_subway,tabName: "SubWay"),
TabData(icon: Icons.directions_walk,tabName: "Walk")

];


class TabData{
  String tabName;
  IconData icon;
  TabData({this.icon,this.tabName});
}