TabBar

  • Usage

    The TabBar widget in Flutter is used in combination with TabBarView to create a swipeable set of tabs, typically seen in apps to organize content or navigate between different sections.

    
    import 'package:flutter/material.dart';
    
    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      final List<Tab> myTabs = <Tab>[
        Tab(text: 'Tab 1'),
        Tab(text: 'Tab 2'),
        Tab(text: 'Tab 3'),
      ];
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: DefaultTabController(
            length: myTabs.length,
            child: Scaffold(
              appBar: AppBar(
                title: Text('TabBar Example'),
                bottom: TabBar(
                  tabs: myTabs,
                ),
              ),
              body: TabBarView(
                children: myTabs.map((Tab tab) {
                  // Replace this with the content for each tab
                  return Center(
                    child: Text(tab.text ?? 'No text provided'),
                  );
                }).toList(),
              ),
            ),
          ),
        );
      }
    }
    
    
    

    TabBar is placed in the AppBar's bottom property to display the tabs.
    TabBarView is used to define the content for each tab. In this case, a simple Center widget displaying the text of each tab is used as placeholder content.
    The DefaultTabController widget is used to manage the state of the TabBar and TabBarView widgets.