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

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

const Expanded(
  child: DefaultTabController(
    length: 2,
    child: Column(
      children: [
        TabBar(
          tabs: [
            Tab(text: 'Tab 1'),
            Tab(text: 'Tab 2'),
          ],
        ),
        TabBarView(
          children: [
            // Content for Tab 1
            Container(child: Text('Tab 1 Content')),
            // Content for Tab 2
            Container(child: Text('Tab 2 Content')),
          ],
        ),
      ],
    ),
  ),
)

Метод 2: динамическая длина вкладок
Вы также можете динамически устанавливать длину вкладок в зависимости от данных или состояния. Вот пример, где длина табуляции определяется списком элементов:

List<String> tabs = ['Tab 1', 'Tab 2', 'Tab 3'];
const Expanded(
  child: DefaultTabController(
    length: tabs.length,
    child: Column(
      children: [
        TabBar(
          tabs: tabs.map((tab) => Tab(text: tab)).toList(),
        ),
        TabBarView(
          children: tabs.map((tab) => Container(child: Text('$tab Content'))).toList(),
        ),
      ],
    ),
  ),
)

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

const Expanded(
  child: DefaultTabController(
    length: 2,
    child: Column(
      children: [
        TabBar(
          indicator: BoxDecoration(
            color: Colors.red,
            borderRadius: BorderRadius.circular(10),
          ),
          tabs: [
            Tab(text: 'Tab 1'),
            Tab(text: 'Tab 2'),
          ],
        ),
        TabBarView(
          children: [
            // Content for Tab 1
            Container(child: Text('Tab 1 Content')),
            // Content for Tab 2
            Container(child: Text('Tab 2 Content')),
          ],
        ),
      ],
    ),
  ),
)

Метод 4: вложенная навигация с вкладками
Вы можете вкладывать виджеты DefaultTabController для создания сложных интерфейсов с вкладками. Вот пример:

const Expanded(
  child: DefaultTabController(
    length: 2,
    child: Column(
      children: [
        TabBar(
          tabs: [
            Tab(text: 'Tab 1'),
            Tab(text: 'Tab 2'),
          ],
        ),
        TabBarView(
          children: [
            // Content for Tab 1
            Container(
              child: DefaultTabController(
                length: 2,
                child: Column(
                  children: [
                    TabBar(
                      tabs: [
                        Tab(text: 'Subtab 1'),
                        Tab(text: 'Subtab 2'),
                      ],
                    ),
                    TabBarView(
                      children: [
                        // Content for Subtab 1
                        Container(child: Text('Subtab 1 Content')),
                        // Content for Subtab 2
                        Container(child: Text('Subtab 2 Content')),
                      ],
                    ),
                  ],
                ),
              ),
            ),
            // Content for Tab 2
            Container(child: Text('Tab 2 Content')),
          ],
        ),
      ],
    ),
  ),
)

Метод 5: управление выбором вкладок
Вы можете программно управлять выбранной вкладкой, используя свойство InitialIndex DefaultTabController. Вот пример:

const Expanded(
  child: DefaultTabController(
    length: 3,
    initialIndex: 1, // Select Tab 2 initially
    child: Column(
      children: [
        TabBar(
          tabs: [
            Tab(text: 'Tab 1'),
            Tab(text: 'Tab 2'),
            Tab(text: 'Tab 3'),
          ],
        ),
        TabBarView(
          children: [
            // Content for Tab 1
            Container(child: Text('Tab 1 Content')),
            // Content for Tab 2
            Container(child: Text('Tab 2 Content')),
            // Content for Tab 3
            Container(child: Text('Tab 3 Content')),
          ],
        ),
      ],
    ),
  ),
)

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