Если вы создаете приложение Flutter и хотите улучшить его взаимодействие с пользователем, вам следует рассмотреть один мощный виджет — TabBar. TabBar позволяет организовать содержимое вашего приложения на нескольких вкладках, что упрощает пользователям навигацию между различными разделами. В этой статье мы рассмотрим различные методы реализации и настройки TabBar во Flutter, а также приведем примеры кода, которые помогут вам начать работу.

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

DefaultTabController(
  length: 3, // Number of tabs
  child: Scaffold(
    appBar: AppBar(
      title: Text('My App'),
      bottom: TabBar(
        tabs: [
          Tab(text: 'Tab 1'),
          Tab(text: 'Tab 2'),
          Tab(text: 'Tab 3'),
        ],
      ),
    ),
    body: TabBarView(
      children: [
        // Content for Tab 1
        // Content for Tab 2
        // Content for Tab 3
      ],
    ),
  ),
)

Метод 2: настройка внешнего вида TabBar
Вы можете настроить внешний вид TabBar с помощью свойства tabBar. Например, вы можете изменить цвет, цвет индикатора и стиль текста. Вот как это можно сделать:

TabBar(
  tabs: [
    Tab(text: 'Tab 1'),
    Tab(text: 'Tab 2'),
    Tab(text: 'Tab 3'),
  ],
  indicatorColor: Colors.red, // Change the indicator color
  labelColor: Colors.blue, // Change the selected tab text color
  unselectedLabelColor: Colors.grey, // Change the unselected tab text color
)

Метод 3: обработка изменений вкладок
Если вы хотите выполнить некоторые действия при выборе вкладки, вы можете использовать свойство onTabChanged TabBar. Вот пример:

TabBar(
  tabs: [
    Tab(text: 'Tab 1'),
    Tab(text: 'Tab 2'),
    Tab(text: 'Tab 3'),
  ],
  onTabChanged: (index) {
    // Perform actions based on the selected tab index
  },
)

Метод 4. Создание прокручиваемой панели вкладок.
Если у вас большое количество вкладок, которые не помещаются на экране, вы можете сделать прокручиваемую панель вкладок. Для этого оберните TabBar SingleChildScrollView и задайте для ScrollDirection значение Axis.horizontal. Вот пример:

SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  child: TabBar(
    isScrollable: true, // Make the TabBar scrollable
    tabs: [
      Tab(text: 'Tab 1'),
      Tab(text: 'Tab 2'),
      Tab(text: 'Tab 3'),
      // Add more tabs here
    ],
  ),
)

В этой статье мы рассмотрели различные методы реализации и настройки TabBar во Flutter. Мы узнали, как использовать DefaultTabController, настраивать внешний вид TabBar, обрабатывать изменения вкладок и создавать прокручиваемую панель вкладок. Используя эти методы, вы можете создать интуитивно понятную и удобную навигацию в своем приложении Flutter. Так что смело экспериментируйте с TabBar, чтобы вывести пользовательский интерфейс вашего приложения на новый уровень!