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

Метод 1: панель вкладок по умолчанию с DefaultTabController
Чтобы создать прокручиваемую панель вкладок, мы можем использовать виджет DefaultTabController вместе с виджетом TabBarView. DefaultTabController управляет состоянием вкладок, а TabBarView отображает содержимое, связанное с каждой вкладкой. Вот пример:

class MyTabbedScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          title: Text('Scrollable TabBar'),
          bottom: TabBar(
            isScrollable: true,
            tabs: [
              Tab(text: 'Tab 1'),
              Tab(text: 'Tab 2'),
              Tab(text: 'Tab 3'),
            ],
          ),
        ),
        body: TabBarView(
          children: [
            Text('Content for Tab 1'),
            Text('Content for Tab 2'),
            Text('Content for Tab 3'),
          ],
        ),
      ),
    );
  }
}

Метод 2: прокручиваемая панель вкладок с помощью Custom ScrollPhysics
Если вы хотите настроить поведение прокрутки TabBar, вы можете использовать CustomScrollPhysics. Это позволяет вам управлять физикой прокрутки, например скоростью прокрутки и анимацией. Вот пример:

class MyTabbedScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 5,
      child: Scaffold(
        appBar: AppBar(
          title: Text('Scrollable TabBar'),
          bottom: TabBar(
            isScrollable: true,
            physics: CustomScrollPhysics(),
            tabs: [
              Tab(text: 'Tab 1'),
              Tab(text: 'Tab 2'),
              Tab(text: 'Tab 3'),
              Tab(text: 'Tab 4'),
              Tab(text: 'Tab 5'),
            ],
          ),
        ),
        body: TabBarView(
          children: [
            Text('Content for Tab 1'),
            Text('Content for Tab 2'),
            Text('Content for Tab 3'),
            Text('Content for Tab 4'),
            Text('Content for Tab 5'),
          ],
        ),
      ),
    );
  }
}
class CustomScrollPhysics extends ScrollPhysics {
  @override
  ScrollPhysics applyTo(ScrollPhysics ancestor) {
    return CustomScrollPhysics();
  }
  @override
  double getScrollVelocityThreshold(PhysicsState state) => 200.0;
  @override
  Simulation? createBallisticSimulation(ScrollMetrics position, double velocity) {
    return null; // Disable the default ballistics animation
  }
}

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

class MyTabbedScreen extends StatelessWidget {
  final List<String> tabTitles = ['Tab 1', 'Tab 2', 'Tab 3', 'Tab 4', 'Tab 5'];
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: tabTitles.length,
      child: Scaffold(
        appBar: AppBar(
          title: Text('Scrollable TabBar'),
          bottom: TabBar(
            isScrollable: true,
            tabs: List<Widget>.generate(
              tabTitles.length,
              (int index) => Tab(text: tabTitles[index]),
            ),
          ),
        ),
        body: TabBarView(
          children: List<Widget>.generate(
            tabTitles.length,
            (int index) => Text('Content for ${tabTitles[index]}'),
          ),
        ),
      ),
    );
  }
}

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

Реализуя эти методы прокручиваемой панели вкладок, вы можете улучшить взаимодействие с пользователем и обеспечить плавную навигацию между различными разделами вашего приложения.