Как добавить индикатор точки во Flutter: несколько методов с примерами кода

Чтобы установить точечный индикатор в приложении Flutter, вы можете использовать несколько методов. Вот несколько подходов и примеры кода:

Метод 1: использование пакета dot_indicator

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

dependencies:
  dot_indicator: ^1.2.0

Шаг 2. Установите пакет, выполнив команду:

flutter pub get

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

import 'package:dot_indicator/dot_indicator.dart';

Шаг 4. Используйте виджет DotIndicator в своем коде:

DotIndicator(
  itemCount: 4, // Number of dots
  currentIndex: 2, // Index of the currently selected dot
  dotSize: 8.0, // Size of each dot
  dotColor: Colors.grey, // Color of the inactive dots
  activeDotColor: Colors.blue, // Color of the active dot
)

Метод 2. Создание пользовательского точечного индикатора

Шаг 1. Определите собственный виджет, представляющий точку:

class Dot extends StatelessWidget {
  final bool isActive;
  final Color activeColor;
  final Color inactiveColor;
  final double size;
  Dot({
    required this.isActive,
    required this.activeColor,
    required this.inactiveColor,
    required this.size,
  });
  @override
  Widget build(BuildContext context) {
    final color = isActive ? activeColor : inactiveColor;
    return Container(
      width: size,
      height: size,
      margin: EdgeInsets.symmetric(horizontal: 4.0),
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        color: color,
      ),
    );
  }
}

Шаг 2. Используйте собственный виджет «Точка» в своем коде:

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Dot(
      isActive: true,
      activeColor: Colors.blue,
      inactiveColor: Colors.grey,
      size: 8.0,
    ),
    Dot(
      isActive: false,
      activeColor: Colors.blue,
      inactiveColor: Colors.grey,
      size: 8.0,
    ),
    Dot(
      isActive: false,
      activeColor: Colors.blue,
      inactiveColor: Colors.grey,
      size: 8.0,
    ),
  ],
)

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