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

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

DefaultTabController(
  length: 3, // Number of tabs
  child: Scaffold(
    appBar: AppBar(
      title: Text('Tab Navigation'),
      bottom: TabBar(
        tabs: [
          Tab(text: 'Tab 1'),
          Tab(text: 'Tab 2'),
          Tab(text: 'Tab 3'),
        ],
      ),
    ),
    body: 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')),
      ],
    ),
  ),
)

Метод 2: использование виджета CupertinoTabScaffold
Если вы хотите добиться стиля навигации по вкладкам, аналогичного iOS, вы можете использовать виджет CupertinoTabScaffold. Этот виджет обеспечивает нативный вид навигации по вкладкам iOS.

CupertinoTabScaffold(
  tabBar: CupertinoTabBar(
    items: [
      BottomNavigationBarItem(
        icon: Icon(Icons.home),
        label: 'Home',
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.search),
        label: 'Search',
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.settings),
        label: 'Settings',
      ),
    ],
  ),
  tabBuilder: (context, index) {
    return CupertinoTabView(
      builder: (context) {
        switch (index) {
          case 0:
            return HomeScreen();
          case 1:
            return SearchScreen();
          case 2:
            return SettingsScreen();
          default:
            return Container();
        }
      },
    );
  },
)

Метод 3. Использование виджета TabBar с IndexedStack
Виджет TabBar в сочетании с IndexedStack обеспечивает возможность эффективного переключения между различными представлениями контента, сохраняя их состояние.

class TabNavigation extends StatefulWidget {
  @override
  _TabNavigationState createState() => _TabNavigationState();
}
class _TabNavigationState extends State<TabNavigation> {
  int _currentIndex = 0;
  final List<Widget> _tabs = [
    Tab1(),
    Tab2(),
    Tab3(),
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Tab Navigation'),
      ),
      body: IndexedStack(
        index: _currentIndex,
        children: _tabs,
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Tab 1',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: 'Tab 2',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            label: 'Tab 3',
          ),
        ],
      ),
    );
  }
}

В этой статье мы рассмотрели три различных метода реализации навигации по вкладкам во Flutter. Виджет DefaultTabController предоставляет простой и гибкий способ управления навигацией по вкладкам. Виджет CupertinoTabScaffold обеспечивает нативную навигацию по вкладкам в стиле iOS. Наконец, виджет TabBar в сочетании с IndexedStack позволяет эффективно переключаться между представлениями контента. Используя эти методы, вы можете создавать впечатляющие интерфейсы навигации по вкладкам для своих приложений Flutter.