🧩TabBar

Что такое TabBar

TabBar в Flutter — это виджет, который позволяет создавать интерфейсы с вкладками. Он обычно используется вместе с TabController и TabBarView, чтобы переключаться между различными экранами или контентом.

Пример использования

Вот пример создания простого интерфейса с вкладками с использованием TabBar:

import 'package:flutter/material.dart';

class TabBarExample extends StatelessWidget {
  const TabBarExample({super.key});

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3, // Количество вкладок
      child: Scaffold(
        appBar: AppBar(
          title: const Text('TabBar Example'),
          bottom: const TabBar(
            tabs: [
              Tab(text: 'Вкладка 1'),
              Tab(text: 'Вкладка 2'),
              Tab(text: 'Вкладка 3'),
            ],
          ),
        ),
        body: const TabBarView(
          children: [
            Center(
              child: Text(
                'Содержимое Вкладки 1',
                style: TextStyle(
                    fontSize: 30,
                    fontWeight: FontWeight.bold,
                    color: Colors.red),
              ),
            ),
            Center(
              child: Text('Содержимое Вкладки 2', style: TextStyle(
                  fontSize: 30,
                  fontWeight: FontWeight.bold,
                  color: Colors.green),
              ),),

            Center(
              child: Text('Содержимое Вкладки 3', style: TextStyle(
                  fontSize: 30,
                  fontWeight: FontWeight.bold,
                  color: Colors.indigo),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Как работает код

1. DefaultTabController: Устанавливает TabController для управления состоянием вкладок.

2. AppBar: Содержит TabBar, который отображает вкладки.

3. TabBarView: Отображает содержимое каждой вкладки, соответствующее выбранной вкладке.

Все настройки TabBar

1. required List<Widget> tabs

   • Описание: Список вкладок, которые вы хотите отобразить.

   • Пример:

     tabs: [
       Tab(text: 'Вкладка 1'),
       Tab(text: 'Вкладка 2'),
       Tab(text: 'Вкладка 3'),
     ]

2. TabController? controller

   • Описание: Контроллер для управления состоянием вкладок. Если вы не укажете, будет использоваться DefaultTabController.

   • Пример:

     controller: TabController(length: 3, vsync: this) // Указание контроллера

3. bool isScrollable

   • Описание: Указывает, можно ли прокручивать вкладки. По умолчанию — false.

   • Пример:

     isScrollable: true // Прокручиваемые вкладки

4. EdgeInsetsGeometry? padding

   • Описание: Отступы вокруг вкладок.

   • Пример:

     padding: EdgeInsets.all(8.0) // Отступы

5. Color? indicatorColor

   • Описание: Цвет индикатора (например, линии под текущей вкладкой).

   • Пример:

     indicatorColor: Colors.blue // Синий индикатор

6. bool automaticIndicatorColorAdjustment

   • Описание: Автоматически изменяет цвет индикатора в зависимости от цвета текста вкладки. По умолчанию — true.

   • Пример:

     automaticIndicatorColorAdjustment: false // Отключение автоматической настройки цвета

7. double indicatorWeight

   • Описание: Толщина индикатора.

   • Пример:

     indicatorWeight: 4.0 // Увеличенная толщина индикатора

8. EdgeInsetsGeometry indicatorPadding

   • Описание: Отступы вокруг индикатора.

   • Пример:

     indicatorPadding: EdgeInsets.symmetric(horizontal: 20.0) // Горизонтальные отступы

9. Decoration? indicator

   • Описание: Декорация для индикатора, позволяющая использовать произвольные стили.

   • Пример:

     indicator: BoxDecoration(
       color: Colors.green, // Цвет индикатора
       borderRadius: BorderRadius.circular(10.0), // Закругленные углы
     )

10. TabBarIndicatorSize? indicatorSize

    • Описание: Размер индикатора (по ширине вкладки или по ширине текста).

    • Пример:

      indicatorSize: TabBarIndicatorSize.tab // Индикатор по ширине вкладки

11. Color? dividerColor

    • Описание: Цвет разделителя между вкладками.

    • Пример:

      dividerColor: Colors.grey // Серый разделитель

12. double? dividerHeight

    • Описание: Высота разделителя между вкладками.

    • Пример:

      dividerHeight: 1.0 // Высота 1 пиксель

13. Color? labelColor

    • Описание: Цвет текста активной вкладки.

    • Пример:

      labelColor: Colors.blue // Синий цвет текста активной вкладки

14. TextStyle? labelStyle

    • Описание: Стиль текста активной вкладки.

    • Пример:

      labelStyle: TextStyle(fontWeight: FontWeight.bold) // Жирный текст

15. EdgeInsetsGeometry? labelPadding

    • Описание: Отступы вокруг текста активной вкладки.

    • Пример:

      labelPadding: EdgeInsets.symmetric(horizontal: 8.0) // Горизонтальные отступы

16. Color? unselectedLabelColor

    • Описание: Цвет текста неактивных вкладок.

    • Пример:

      unselectedLabelColor: Colors.grey // Серый цвет текста неактивных вкладок

17. TextStyle? unselectedLabelStyle

    • Описание: Стиль текста неактивных вкладок.

    • Пример:

      unselectedLabelStyle: TextStyle(fontStyle: FontStyle.italic) // Курсив

18. DragStartBehavior dragStartBehavior

    • Описание: Поведение начала перетаскивания для вкладок. По умолчанию — DragStartBehavior.start.

    • Пример:

      dragStartBehavior: DragStartBehavior.down // Начало перетаскивания вниз

19. WidgetStateProperty<Color?>? overlayColor

    • Описание: Цвет наложения при взаимодействии с вкладкой.

    • Пример:

      overlayColor: MaterialStateProperty.all(Colors.blue.withOpacity(0.2)) // Полупрозрачное наложение

20. MouseCursor? mouseCursor

    • Описание: Указатель мыши при наведении на вкладку.

    • Пример:

      mouseCursor: SystemMouseCursors.click // Указатель "клик"

21. bool? enableFeedback

    • Описание: Включает или отключает обратную связь при нажатии на вкладку. По умолчанию — true.

    • Пример:

      enableFeedback: false // Отключение обратной связи

22. void Function(int)? onTap

    • Описание: Обработчик нажатия на вкладку.

    • Пример:

      onTap: (index) {
        print('Tapped tab: $index'); // Вывод индекса нажатой вкладки
      }

23. ScrollPhysics? physics

    • Описание: Физика прокрутки для вкладок.

    • Пример:

      physics: BouncingScrollPhysics() // Эффект отскока при прокрутке

24. InteractiveInkFeatureFactory? splashFactory

    • Описание: Фабрика для создания эффекта ряби при нажатии.

    • Пример:

      splashFactory: InkRipple.splashFactory // Эффект ряби

25. BorderRadius? splashBorderRadius

    • Описание: Закругленные углы для эффекта ряби.

    • Пример:

      splashBorderRadius: BorderRadius.circular(10.0) // Закругление ряби

26. TabAlignment? tabAlignment

    • Описание: Выравнивание вкладок (по центру, по левому или правому краю).

    • Пример:

      tabAlignment: TabAlignment.center // Центрированное выравнивание

27. TextScaler? textScaler

    • Описание: Масштабирование текста для вкладок.

    • Пример:

      textScaler: TextScaler(); // Пример использования масштабирования текста

Заключение

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