Flutter — популярная кроссплатформенная среда для разработки мобильных приложений. Одним из распространенных требований при разработке приложений является добавление TabBar внутри тела экрана. В этой статье мы рассмотрим различные методы достижения этой цели во Flutter, а также примеры кода. Итак, приступим!

Метод 1: использование DefaultTabController
Самый простой способ добавить TabBar внутри тела — использовать виджет DefaultTabController. Этот виджет автоматически обрабатывает состояние и синхронизацию TabBar с содержимым. Вот пример:

class MyTabScreen 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(text: 'Tab 1'),
              Tab(text: 'Tab 2'),
              Tab(text: 'Tab 3'),
            ],
          ),
        ),
        body: TabBarView(
          children: [
            // Content of Tab 1
            Container(),
            // Content of Tab 2
            Container(),
            // Content of Tab 3
            Container(),
          ],
        ),
      ),
    );
  }
}

Метод 2: собственный TabController
Если вам нужен больший контроль над TabBar, вы можете создать собственный TabController. Этот подход позволяет вам определить TabController отдельно и передать его виджетам TabBar и TabBarView. Вот пример:

class MyTabScreen extends StatefulWidget {
  @override
  _MyTabScreenState createState() => _MyTabScreenState();
}
class _MyTabScreenState extends State<MyTabScreen>
    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('TabBar Example'),
        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
          Container(),
          // Content of Tab 2
          Container(),
          // Content of Tab 3
          Container(),
        ],
      ),
    );
  }
}

Метод 3: использование IndexedStack
Другой подход — использование виджета IndexedStack, который позволяет переключаться между различными дочерними виджетами на основе выбранного индекса вкладки. Вот пример:

class MyTabScreen extends StatefulWidget {
  @override
  _MyTabScreenState createState() => _MyTabScreenState();
}
class _MyTabScreenState extends State<MyTabScreen> {
  int _currentIndex = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('TabBar Example'),
        bottom: TabBar(
          onTap: (index) {
            setState(() {
              _currentIndex = index;
            });
          },
          tabs: [
            Tab(text: 'Tab 1'),
            Tab(text: 'Tab 2'),
            Tab(text: 'Tab 3'),
          ],
        ),
      ),
      body: IndexedStack(
        index: _currentIndex,
        children: [
          // Content of Tab 1
          Container(),
          // Content of Tab 2
          Container(),
          // Content of Tab 3
          Container(),
        ],
      ),
    );
  }
}

В этой статье мы рассмотрели различные способы добавления TabBar внутри тела во Flutter. Мы рассмотрели использование DefaultTabController, пользовательского TabController и виджета IndexedStack. В зависимости от ваших требований и желаемого уровня контроля вы можете выбрать метод, который лучше всего соответствует вашим потребностям в разработке приложений. Приятного кодирования!