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:

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:

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.