# TabBarAndTabBarView

The `TabBar` and `TabBarView` widgets in Flutter are essential components for creating tabbed user interfaces. They allow users to switch between different content sections or views by selecting tabs. Here's an overview of these two widgets:

#### `TabBar` Widget:

The `TabBar` widget is used to define a set of tabs that users can interact with. It typically works in conjunction with a `DefaultTabController` or `TabController` to manage the state and behavior of the tabs. Key properties and features of the `TabBar` widget include:

* **`tabs` (required):** A list of `Tab` widgets that represent the individual tabs. Each `Tab` contains a label (usually a `Text` widget) and an optional icon.
* **`controller` (required when not using `DefaultTabController`):** A `TabController` that manages the state of the `TabBar` and is responsible for synchronizing the selected tab with the `TabBarView`.
* **`isScrollable`:** If set to `true`, the tabs will be scrollable if there are too many to fit within the available space.
* \*\*`labelColor`, `unselectedLabelColor`: Define the color of the tab labels when they are selected and unselected.
* \*\*`indicatorColor`: Sets the color of the selected tab indicator (the line under the selected tab).
* \*\*`indicatorWeight`: Specifies the thickness of the selected tab indicator.

#### `TabBarView` Widget:

The `TabBarView` widget is used to display the content associated with the tabs. It works in conjunction with the `TabBar` and the same `TabController` to ensure that the content matches the selected tab. Key properties and features of the `TabBarView` widget include:

* **`controller` (required):** The same `TabController` used for the `TabBar`.
* **`children` (required):** A list of widgets, typically views or screens, that correspond to each tab. The order of the children should match the order of the tabs in the `TabBar`.

#### Example Usage:

Here's a simple example of how to use `TabBar` and `TabBarView` in Flutter:

```dart
DefaultTabController(
  length: 3, // Number of tabs
  child: Scaffold(
    appBar: AppBar(
      title: Text('Tabbed Example'),
      bottom: TabBar(
        tabs: [
          Tab(text: 'Tab 1'),
          Tab(text: 'Tab 2'),
          Tab(text: 'Tab 3'),
        ],
      ),
    ),
    body: TabBarView(
      children: [
        Center(child: Text('Tab 1 Content')),
        Center(child: Text('Tab 2 Content')),
        Center(child: Text('Tab 3 Content')),
      ],
    ),
  ),
)
```

In this example:

* We wrap our `Scaffold` with a `DefaultTabController` to manage the state of the tabs.
* Inside the `Scaffold`, we define an `AppBar` with a `TabBar` as its `bottom` property, containing three tabs.
* The `TabBarView` displays the corresponding content for each tab.

When the user selects a tab, the content in the `TabBarView` is updated to match the selected tab. This allows you to create tabbed interfaces for various purposes, such as navigation, settings, or displaying different views of data.

Also, you can use `TabController` without `DefaultTabController` if you prefer to manage the tab controller manually. Here's an example of how to do that:

```dart
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  final TabController tabController = TabController(length: 3, vsync: AnimatedListState());

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Tabbed Example'),
        ),
        body: Column(
          children: [
            TabBar(
              controller: tabController,
              tabs: [
                Tab(text: 'Tab 1'),
                Tab(text: 'Tab 2'),
                Tab(text: 'Tab 3'),
              ],
            ),
            Expanded(
              child: TabBarView(
                controller: tabController,
                children: [
                  Center(child: Text('Tab 1 Content')),
                  Center(child: Text('Tab 2 Content')),
                  Center(child: Text('Tab 3 Content')),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}
```

In this example:

* We create a `TabController` with a length of 3 to manage the tabs.
* We set the `vsync` parameter of `TabController` to `AnimatedListState()` to provide the controller with the TickerProvider needed for animations.
* The `TabBar` and `TabBarView` both use the same `controller` property, which is the `TabController` we've created.
* The `Expanded` widget is used to ensure that the `TabBarView` takes up the remaining available space in the column.

This approach gives you more control over the tab controller and is useful when you want to manage the tab controller's state explicitly.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://des-vu-technologies.gitbook.io/blogs-by-shankar/flutter/widget-of-the-day-3/tabbarandtabbarview.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.