Tabs in Flutter

Tabs are a commonly used UI pattern in mobile applications, and Flutter provides a powerful widget for implementing tabs called TabBar. In this blog post, we will explore how to use the TabBar widget to create tabs in our Flutter applications.

Creating Tabs with TabBar

To create tabs using the TabBar widget, we need to provide a TabBar widget as the bottom property of the AppBar widget. 

Here's an example of TabBar

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  final List<Tab> myTabs = [    Tab(text: 'Tab 1'),    Tab(text: 'Tab 2'),    Tab(text: 'Tab 3'),  ];
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      home: DefaultTabController(
        length: myTabs.length,
        child: Scaffold(
          appBar: AppBar(
            title: Text('My App'),
            bottom: TabBar(
              tabs: myTabs,
            ),
          ),
          body: TabBarView(
            children: [
              Center(child: Text('Tab 1')),
              Center(child: Text('Tab 2')),
              Center(child: Text('Tab 3')),
            ],
          ),
        ),
      ),
    );
  }
}​

In this example, we define a list of Tab widgets and use them to create the TabBar widget. We also use the DefaultTabController widget to set the number of tabs and to provide the child widget that displays the content of each tab. Finally, we use the TabBarView widget to define the content of each tab.

Customizing Tab Styles

We can customize the style of the tabs by providing a TabBar widget with a TabBarIndicator widget as the indicator property. 

Here's an example

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  final List<Tab> myTabs = [    Tab(text: 'Tab 1'),    Tab(text: 'Tab 2'),    Tab(text: 'Tab 3'),  ];
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      home: DefaultTabController(
        length: myTabs.length,
        child: Scaffold(
          appBar: AppBar(
            title: Text('My App'),
            bottom: TabBar(
              tabs: myTabs,
              indicator: BoxDecoration(
                border: Border(
                  bottom: BorderSide(
                    color: Colors.orange,
                    width: 4.0,
                  ),
                ),
              ),
            ),
          ),
          body: TabBarView(
            children: [
              Center(child: Text('Tab 1')),
              Center(child: Text('Tab 2')),
              Center(child: Text('Tab 3')),
            ],
          ),
        ),
      ),
    );
  }
}​

In this example, we customize the style of the tabs by setting the indicator property of the TabBar widget to a BoxDecoration that defines a bottom border with an orange color and a width of 4.0. We can also use other properties of the BoxDecoration widget to achieve different styles.