Flutter TabBar — это виджет, используемый для отображения горизонтального ряда вкладок. Каждая вкладка представляет собой отдельный вид или экран. Вот несколько методов, которые вы можете использовать для реализации TabBar во Flutter, а также примеры кода:

Метод 1: DefaultTabController
DefaultTabController — это встроенный виджет Flutter, который управляет состоянием TabBar и TabBarView. Вот пример:

class MyTabbedScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3, // Number of tabs
      child: Scaffold(
        appBar: AppBar(
          title: Text('My Tabbed Screen'),
          bottom: TabBar(
            tabs: [
              Tab(text: 'Tab 1'),
              Tab(text: 'Tab 2'),
              Tab(text: 'Tab 3'),
            ],
          ),
        ),
        body: TabBarView(
          children: [
            // Content of Tab 1
            Center(child: Text('Tab 1')),
            // Content of Tab 2
            Center(child: Text('Tab 2')),
            // Content of Tab 3
            Center(child: Text('Tab 3')),
          ],
        ),
      ),
    );
  }
}

Метод 2: TabController
Вы также можете использовать класс TabController для программного управления поведением TabBar. Вот пример:

class MyTabbedScreen extends StatefulWidget {
  @override
  _MyTabbedScreenState createState() => _MyTabbedScreenState();
}
class _MyTabbedScreenState extends State<MyTabbedScreen>
    with SingleTickerProviderStateMixin {
  late TabController _tabController;
  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 3, vsync: this);
  }
  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My Tabbed Screen'),
        bottom: TabBar(
          controller: _tabController,
          tabs: [
            Tab(text: 'Tab 1'),
            Tab(text: 'Tab 2'),
            Tab(text: 'Tab 3'),
          ],
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: [
          // Content of Tab 1
          Center(child: Text('Tab 1')),
          // Content of Tab 2
          Center(child: Text('Tab 2')),
          // Content of Tab 3
          Center(child: Text('Tab 3')),
        ],
      ),
    );
  }
}

Метод 3: CupertinoTabBar
Если вы предпочитаете панель вкладок в стиле iOS, вы можете использовать виджет CupertinoTabBar. Вот пример:

import 'package:flutter/cupertino.dart';
class MyTabbedScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoTabScaffold(
      tabBar: CupertinoTabBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.home),
            label: 'Tab 1',
          ),
          BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.search),
            label: 'Tab 2',
          ),
          BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.person),
            label: 'Tab 3',
          ),
        ],
      ),
      tabBuilder: (context, index) {
        return CupertinoTabView(
          builder: (context) {
            switch (index) {
              case 0:
                return Center(child: Text('Tab 1'));
              case 1:
                return Center(child: Text('Tab 2'));
              case 2:
                return Center(child: Text('Tab 3'));
              default:
                return Container();
            }
          },
        );
      },
    );
  }
}