How to use tabs in Flutter?

Flutter provides a TabBar widget that displays a horizontal row of tabs. In this post we will learn how to use TabBar widget in a Flutter app.

Steps to use TabBar widget –

  1. TabController – We use the TabController to keep the selected tab coordinated with the content sections. There are two ways to create a TabController. The first one is to create the TabController manually and the second one is to create it using the DefaultTabController widget. I will use the DefaultTabController in the example here.
return MaterialApp(
  home: DefaultTabController(
    initialIndex: 0,
    length: 3,
    child: Scaffold(),
  ),
);

2. We create tabs using the TabBar widget.

return MaterialApp(
  home: DefaultTabController(
    length: 3,
    child: Scaffold(
      appBar: AppBar(
        title: const Text('TabBar Widget'),
        bottom: const TabBar(
          tabs: <Widget>[
              Tab(
                icon: Icon(Icons.mail),
              ),
              Tab(
                icon: Icon(Icons.send),
              ),
              Tab(
                icon: Icon(Icons.settings),
              ),
            ],
        ),
      ),
    ),
  ),
);

3. Now, we need to display content when a tab is selected. We pass the Widgets for the contents as children to the TabBarView widget. Here, I’m showing image as content.

 body: TabBarView(
          children: <Widget>[
            Center(
              child: Padding(
                padding: EdgeInsets.all(50),
                child: Image.network('https://cdn.pixabay.com/photo/2015/12/08/18/39/at-sign-1083508_960_720.png'),
              )
            ),
             Center(
              child: Padding(
                padding: EdgeInsets.all(50),
                child: Image.network('https://cdn.pixabay.com/photo/2019/07/03/05/58/envelope-4313721_960_720.png'),),
            ),
            Center(
              child: Padding(
                padding: EdgeInsets.all(50),
                child: Image.network('https://cdn.pixabay.com/photo/2015/12/04/22/20/gear-1077550_960_720.png'),
              ),
            ),
          ],
        ),

Now, let’s see the full code.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatelessWidget(),
    );
  }
}

class MyStatelessWidget extends StatelessWidget {
  const MyStatelessWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      initialIndex: 0,
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          title: const Text('TabBar Widget'),
          bottom: const TabBar(
            tabs: <Widget>[
              Tab(
                icon: Icon(Icons.mail),
              ),
              Tab(
                icon: Icon(Icons.send),
              ),
              Tab(
                icon: Icon(Icons.settings),
              ),
            ],
          ),
        ),
        body: TabBarView(
          children: <Widget>[
            Center(
              child: Padding(
                padding: EdgeInsets.all(50),
                child: Image.network('https://cdn.pixabay.com/photo/2015/12/08/18/39/at-sign-1083508_960_720.png'),
              )
            ),
             Center(
              child: Padding(
                padding: EdgeInsets.all(50),
                child: Image.network('https://cdn.pixabay.com/photo/2019/07/03/05/58/envelope-4313721_960_720.png'),),
            ),
            Center(
              child: Padding(
                padding: EdgeInsets.all(50),
                child: Image.network('https://cdn.pixabay.com/photo/2015/12/04/22/20/gear-1077550_960_720.png'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Output:

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: