Flutter TabBar: A Simple Guide to Creating Tab Navigation

 # Flutter TabBar: A Simple Guide to Creating Tab Navigation

Tab navigation is an essential part of modern mobile applications, allowing users to switch between different sections of an app easily. Flutter provides a powerful widget called **TabBar** that enables smooth tab-based navigation. In this guide, we'll explore how to implement **TabBar** in Flutter step by step.

---

## What is TabBar in Flutter?

The **TabBar** widget in Flutter allows users to navigate between different views by tapping on tabs. It is commonly used in combination with **TabBarView** and **DefaultTabController**.

### Components of Tab Navigation in Flutter:

1. **TabBar** – Displays the tab headers.

2. **TabBarView** – Shows the content associated with each tab.

3. **DefaultTabController** – Manages the state of the tabs.

---

## Implementing TabBar in Flutter

Let's go through a basic implementation of **TabBar** step by step.

### Step 1: Create a New Flutter Project

Ensure you have Flutter installed and set up. Create a new Flutter project using:

```sh

flutter create tabbar_demo

cd tabbar_demo

```

### Step 2: Add Required Dependencies

No additional dependencies are needed since **TabBar** is built into Flutter.

### Step 3: Implement the TabBar

Now, modify the `main.dart` file to include **TabBar** navigation:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: TabBarExample(),
    );
  }
}

class TabBarExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3, // Number of tabs
      child: Scaffold(
        appBar: AppBar(
          title: Text("TabBar Example"),
          bottom: TabBar(
            tabs: [
              Tab(icon: Icon(Icons.home), text: "Home"),
              Tab(icon: Icon(Icons.settings), text: "Settings"),
              Tab(icon: Icon(Icons.person), text: "Profile"),
            ],
          ),
        ),
        body: TabBarView(
          children: [
            Center(child: Text("Home Screen")),
            Center(child: Text("Settings Screen")),
            Center(child: Text("Profile Screen")),
          ],
        ),
      ),
    );
  }
}

## Explanation of Code:

1. **DefaultTabController** – Wraps the **Scaffold** to manage tab states.

2. **AppBar** – Contains the **TabBar** for navigation.

3. **TabBar** – Defines the tabs with icons and text.

4. **TabBarView** – Displays corresponding content when a tab is selected.

---

## Customizing the TabBar

You can enhance the **TabBar** with styling options such as color, indicator style, and more.

### Changing TabBar Style

You can modify the appearance of the **TabBar** using properties like:

```dart

bottom: TabBar(

  indicatorColor: Colors.yellow,

  indicatorWeight: 4.0,

  labelColor: Colors.white,

  unselectedLabelColor: Colors.grey,

  tabs: [...],

),

```

### Adding Floating TabBar

To place the **TabBar** at the bottom, use **bottomNavigationBar**:

```dart

bottomNavigationBar: TabBar(

  tabs: [...],

),

```

---

## Conclusion

In this guide, we learned how to implement **TabBar** in Flutter for smooth tab-based navigation. By combining **TabBar**, **TabBarView**, and **DefaultTabController**, we can efficiently switch between multiple views in a Flutter app.

Try customizing your **TabBar** with different styles and layouts to create a unique user experience. Happy coding!