Tabbar in Flutter

Deepak Kumar

27 April 2023

Tabbar in Flutter app is used for simple navigation.

We can set different styles to different tabs for different work.

Tabbar is then placed at top of the screen on android devices and in the bottom on iOS devices.

There is a common pattern working with iOS and Android devices using material design. And flutter provides a convenient way to set tab layout.

Basically, it’s a part of UI, that navigates the user to different pages in an application.

You may also check our Flutter app development services page

To better understand the concept of tabs let’s start with designing a screen with three tabs.

Steps to follow

Design a Tab Controller
Add tabs to the app.
Add content in each tab.

Code of Tabbar Controller

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
  late TabController _tabbarController;

  @override
  void initState() {
    super.initState();
    _tabbarController = TabController(length: 3, vsync: this);
  }

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {

late TabController _tabbarController;

@override

void initState() {

super.initState();

_tabbarController = TabController(length: 3, vsync: this);

}

Create Tabs

        bottom: TabBar(
          controller: _tabbarController,
          tabs: const <Widget>[
            Tab(
              icon: Icon(Icons.home),
            ),
            Tab(
              icon: Icon(Icons.account_balance),
            ),
            Tab(
              icon: Icon(Icons.add_shopping_cart),
            ),

          ],
        ),

bottom: TabBar(

controller: _tabbarController,

tabs: const <Widget>[

Tab(

icon: Icon(Icons.home),

Tab(

icon: Icon(Icons.account_balance),

Tab(

icon: Icon(Icons.add_shopping_cart),

Complete Code of Tabbar

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
  late TabController _tabbarController;

  @override
  void initState() {
    super.initState();
    _tabbarController = TabController(length: 3, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('TabBar in flutter'),
        bottom: TabBar(
          controller: _tabbarController,
          tabs: const <Widget>[
            Tab(
              icon: Icon(Icons.home),
            ),
            Tab(
              icon: Icon(Icons.account_balance),
            ),
            Tab(
              icon: Icon(Icons.add_shopping_cart),
            ),
          ],
        ),
      ),
      body: TabBarView(
        controller: _tabbarController,
        children: const <Widget>[
          Center(
            child: Text(
              "It's a home page",
              style: TextStyle(fontSize: 24),
            ),
          ),
          Center(
            child: Text(
              "It's a profile page",
              style: TextStyle(fontSize: 24),
            ),
          ),
          Center(
            child: Text(
              "It's a cart page",
              style: TextStyle(fontSize: 24),
            ),
          ),
        ],
      ),
    );
  }
}

import 'package:flutter/material.dart';

void main() {

runApp(const MyApp());

}

class MyApp extends StatelessWidget {

const MyApp({Key? key}) : super(key: key);

// This widget is the root of your application.

@override

Widget build(BuildContext context) {

return MaterialApp(

debugShowCheckedModeBanner: false,

theme: ThemeData(

primarySwatch: Colors.blue,

home: const MyHomePage(),

);

}

class MyHomePage extends StatefulWidget {

const MyHomePage({Key? key}) : super(key: key);

@override

State<MyHomePage> createState() => _MyHomePageState();

}

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {

late TabController _tabbarController;

@override

void initState() {

super.initState();

_tabbarController = TabController(length: 3, vsync: this);

}

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: const Text('TabBar in flutter'),

bottom: TabBar(

controller: _tabbarController,

tabs: const <Widget>[

Tab(

icon: Icon(Icons.home),

Tab(

icon: Icon(Icons.account_balance),

Tab(

icon: Icon(Icons.add_shopping_cart),

body: TabBarView(

controller: _tabbarController,

children: const <Widget>[

Center(

child: Text(

"It's a home page",

style: TextStyle(fontSize: 24),

Center(

child: Text(

"It's a profile page",

style: TextStyle(fontSize: 24),

Center(

child: Text(

"It's a cart page",

style: TextStyle(fontSize: 24),

);

}

Conclusion

In this blog, we have discussed how we can use the tabbars in the flutter apps.

I hope it will help you in understanding the tabbar.

Thanks for reading!!

Reference

https://docs.flutter.dev/cookbook/design/tabs

See our other posts here