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

Метод 1: использование пакета dot_indicator
Пакет dot_indicator предоставляет простой способ добавить индикатор страницы в виде точки в ваш Flutter Swiper. Вот пример того, как его использовать:

import 'package:flutter_swiper/flutter_swiper.dart';
import 'package:dot_indicator/dot_indicator.dart';
Swiper(
  itemBuilder: (BuildContext context, int index) {
    // Your item builder code here
  },
  itemCount: 3,
  pagination: DotSwiperPaginationBuilder(
    color: Colors.grey,
    activeColor: Colors.blue,
    size: 8.0,
    activeSize: 12.0,
    space: 5.0,
  ).build(),
)

Метод 2: настройка нумерации страниц в Swiper
Пакет Flutter Swiper предоставляет встроенную поддержку нумерации страниц. Вы можете настроить его для создания индикатора страницы. Вот пример:

import 'package:flutter_swiper/flutter_swiper.dart';
Swiper(
  itemBuilder: (BuildContext context, int index) {
    // Your item builder code here
  },
  itemCount: 3,
  pagination: SwiperPagination(
    builder: SwiperPagination.dots,
    alignment: Alignment.bottomCenter,
    margin: EdgeInsets.only(bottom: 10.0),
    builder: DotSwiperPaginationBuilder(
      color: Colors.grey,
      activeColor: Colors.blue,
      size: 8.0,
      activeSize: 12.0,
      space: 5.0,
    ),
  ),
)

Метод 3. Создание пользовательского индикатора страницы
Если вам нужен больший контроль над дизайном и поведением индикатора страницы, вы можете создать собственный виджет. Вот пример:

import 'package:flutter_swiper/flutter_swiper.dart';
Swiper(
  itemBuilder: (BuildContext context, int index) {
    // Your item builder code here
  },
  itemCount: 3,
  pagination: SwiperCustomPagination(
    builder: (BuildContext context, SwiperPluginConfig config) {
      return CustomPageIndicator(
        itemCount: config.itemCount,
        activeIndex: config.activeIndex,
        color: Colors.grey,
        activeColor: Colors.blue,
      );
    },
  ),
)

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