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

Метод 1: использование пакета SmoothPageIndicator
Flutter предоставляет множество пакетов, упрощающих процесс создания компонентов пользовательского интерфейса. Одним из таких пакетов является SmoothPageIndicator. Вот как это можно реализовать:

Шаг 1. Добавьте пакет в файл pubspec.yaml:

dependencies:
  smooth_page_indicator: ^1.0.0

Шаг 2. Импортируйте пакет в файл Dart:

import 'package:smooth_page_indicator/smooth_page_indicator.dart';

Шаг 3. Реализуйте виджет SmoothPageIndicator:

SmoothPageIndicator(
  controller: pageController, // Provide the PageController
  count: pageCount, // Specify the number of pages
  effect: WormEffect(), // Choose the desired effect
)

Метод 2: пользовательский индикатор страницы с использованием PageView
Если вы предпочитаете собственную реализацию, вы можете создать плавный индикатор страницы с помощью виджета PageView. Вот пример:

Шаг 1. Настройте PageController:

PageController _pageController = PageController();

Шаг 2. Создайте собственный виджет индикатора страницы:

class CustomPageIndicator extends AnimatedWidget {
  final int pageCount;
  final double dotSize;
  final Color dotColor;
  final Color activeDotColor;
  CustomPageIndicator({
    required Animation<double> animation,
    required this.pageCount,
    this.dotSize = 10.0,
    this.dotColor = Colors.grey,
    this.activeDotColor = Colors.blue,
  }) : super(listenable: animation);
  @override
  Widget build(BuildContext context) {
    final animation = listenable as Animation<double>;
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: List.generate(pageCount, (index) {
        final isActive = animation.value.floor() == index;
        return Container(
          width: dotSize,
          height: dotSize,
          margin: EdgeInsets.symmetric(horizontal: 4.0),
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            color: isActive ? activeDotColor : dotColor,
          ),
        );
      }),
    );
  }
}

Шаг 3. Добавьте PageView и индикатор пользовательской страницы в дерево виджетов:

PageView(
  controller: _pageController,
  // Add your pages
),
CustomPageIndicator(
  animation: _pageController,
  pageCount: pageCount,
)

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

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