How to use defaulttabcontroller in Flutter?

In this blog post, we’ll explore how to use DefaultTabController in Flutter to create stylish and attractive tab layouts in Flutter. Flutter offers a powerful widget called DefaultTabController for managing tabbed interfaces in your app.

Table of Contents

• What is DefaultTabController in Flutter?
• How does DefaultTabController work?
• Using DefaultTabController Flutter with Style:
  • Example 1: Basic Usage of defaulttabcontroller flutter
  • Example 2: Basic Usage with Styled Tabs
  • Example 2: Custom TabBar and TabBarView with Gradient Background
• Conclusion

What is DefaultTabController in Flutter?

DefaultTabController simplifies the process of managing tabs in Flutter by coordinating between the TabBar and TabBarView widgets. It handles the state of the currently selected tab index, making it easy to switch between different tab views seamlessly.

How does DefaultTabController work?

The DefaultTabController widget works by connecting two essential components:

1. TabBar: Displays the tabs at the top of the screen.
2. TabBarView: Contains the content corresponding to each tab.

Whenever a user selects a tab, DefaultTabController updates the index and ensures that the appropriate content is displayed in the TabBarView.

Using DefaultTabController Flutter with Style:

Let’s enhance our tab examples with custom styling and background colors to create a more visually appealing layout.

Example 1: Basic Usage of defaulttabcontroller flutter

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3, // Specify the number of tabs
        child: Scaffold(
          appBar: AppBar(
            title: Text('Tab Example'),
            bottom: TabBar(
              tabs: [
                Tab(icon: Icon(Icons.directions_car)),
                Tab(icon: Icon(Icons.directions_transit)),
                Tab(icon: Icon(Icons.directions_bike)),
              ],
            ),
          ),
          body: TabBarView(
            children: [
              Icon(Icons.directions_car),
              Icon(Icons.directions_transit),
              Icon(Icons.directions_bike),
            ],
          ),
        ),
      ),
    );
  }
}

In this example, we have created a basic Flutter app with three tabs. Each tab displays a different icon, and when a tab is selected, the corresponding icon is displayed below the TabBar.

Output:

Example 2: Basic Usage with Styled Tabs

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.blueGrey, // Set app bar background color
            title: Text('Stylish Tab Example'),
            bottom: TabBar(
              indicatorColor: Colors.white, // Set tab indicator color
              tabs: [
                Tab(
                  icon: Icon(Icons.directions_car),
                  text: 'Cars',
                ),
                Tab(
                  icon: Icon(Icons.directions_transit),
                  text: 'Transit',
                ),
                Tab(
                  icon: Icon(Icons.directions_bike),
                  text: 'Bikes',
                ),
              ],
            ),
          ),
          body: Container( // Set background color for tab content
            color: Colors.blueGrey.shade200,
            child: TabBarView(
              children: [
                Icon(Icons.directions_car, size: 100),
                Icon(Icons.directions_transit, size: 100),
                Icon(Icons.directions_bike, size: 100),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Output:

In this example, we have customized the tabs by adding text along with icons. The TabBarView contains placeholders for displaying different content corresponding to each tab.

Example 2: Custom TabBar and TabBarView with Gradient Background

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 2,
        child: Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.blue, // Set app bar background color
            title: Text('Gradient Tab Example'),
            bottom: TabBar(
              indicatorColor: Colors.white, // Set tab indicator color
              tabs: [
                Tab(
                  icon: Icon(Icons.star, color: Colors.white),
                  text: 'Favorites',
                ),
                Tab(
                  icon: Icon(Icons.history, color: Colors.white),
                  text: 'History',
                ),
              ],
            ),
          ),
          body: Container(
            // Apply gradient background to tab content
            decoration: BoxDecoration(
              gradient: LinearGradient(
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
                colors: [Colors.teal, Colors.deepPurpleAccent],
              ),
            ),
            child: TabBarView(
              children: [
                Center(
                    child: Text('Display Favorites here',
                        style: TextStyle(color: Colors.white))),
                Center(
                    child: Text('Display History here',
                        style: TextStyle(color: Colors.white))),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Output:

Also Read:

• How to Install Packages in Flutter?
• How to Center Align Text Using Alignwidget Flutter?

Conclusion

DefaultTabController simplifies the process of managing tabs in Flutter apps by providing a convenient way to coordinate between TabBar and TabBarView. By understanding its usage and working principles, you can create more interactive and engaging user interfaces in your Flutter applications.

You can follow the official: details of font sizes in Flutter to explore more.