🧩Stepper()

Stepper в Flutter

Что такое Stepper?

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

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

Пример использования Stepper

class StepperExample extends StatelessWidget {
  const StepperExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stepper(
        steps: const [
          Step(
            title: Text('Step 1'),
            content: Text('Description for step 1'),
            isActive: true,
          ),
          Step(
            title: Text('Step 2'),
            content: Text('Description for step 2'),
          ),
        ],
        currentStep: 0,
        onStepContinue: () {
          // Код для перехода к следующему шагу
        },
        onStepCancel: () {
          // Код для возврата к предыдущему шагу
        },
      ),
    );
  }
}

В этом примере создается простой Stepper с двумя шагами. Каждый шаг отображает заголовок и описание, а кнопки "Continue" и "Cancel" позволяют пользователю переходить между ними.

---

Все настройки Stepper с пояснениями и примерами

1. required List<Step> steps

Описание: Список шагов, из которых состоит Stepper. Каждый Step содержит заголовок, описание и состояние. Пример:

steps: [
  Step(
    title: Text('Шаг 1'),
    content: Text('Описание для шага 1'),
  ),
  Step(
    title: Text('Шаг 2'),
    content: Text('Описание для шага 2'),
  ),
]

---

2. ScrollController? controller

Описание: Контроллер для прокрутки в Stepper, позволяющий управлять прокруткой списка шагов. Пример:

controller: ScrollController() // Позволяет управлять прокруткой Stepper

---

3. ScrollPhysics? physics

Описание: Физика прокрутки для Stepper, которая определяет, как шаги прокручиваются (например, пружинящая прокрутка). Пример:

physics: BouncingScrollPhysics() // Добавляет пружинистую прокрутку для списка шагов

---

4. StepperType type

Описание: Определяет ориентацию Stepper. Значения могут быть StepperType.vertical для вертикального и StepperType.horizontal для горизонтального расположения. Пример:

type: StepperType.horizontal // Горизонтальный Stepper

---

5. int currentStep

Описание: Индекс текущего шага, который сейчас активен. Пример:

currentStep: 1 // Указывает на второй шаг, поскольку индексация начинается с 0

---

6. void Function(int)? onStepTapped

Описание: Функция, вызываемая при нажатии на шаг. Можно использовать для перехода к выбранному шагу. Пример:

onStepTapped: (index) {
  // Код для обработки нажатия на шаг с индексом `index`
}

---

7. void Function()? onStepContinue

Описание: Функция, вызываемая при нажатии на кнопку "Continue". Используется для перехода к следующему шагу. Пример:

onStepContinue: () {
  // Код для перехода к следующему шагу
}

---

8. void Function()? onStepCancel

Описание: Функция, вызываемая при нажатии на кнопку "Cancel". Используется для возврата к предыдущему шагу. Пример:

onStepCancel: () {
  // Код для возврата к предыдущему шагу
}

---

9. Widget Function(BuildContext, ControlsDetails)? controlsBuilder

Описание: Позволяет кастомизировать вид и поведение кнопок управления (например, "Continue" и "Cancel") в Stepper. Пример:

controlsBuilder: (context, details) {
  return Row(
    children: [
      ElevatedButton(
        onPressed: details.onStepContinue,
        child: Text('Далее'),
      ),
      TextButton(
        onPressed: details.onStepCancel,
        child: Text('Назад'),
      ),
    ],
  );
}

---

10. double? elevation

Описание: Устанавливает высоту тени Stepper, что добавляет объемности элементу. Пример:

elevation: 4.0 // Устанавливает тень для Stepper

---

11. EdgeInsetsGeometry? margin

Описание: Определяет внешний отступ (margin) вокруг Stepper. Пример:

margin: EdgeInsets.all(16.0) // Устанавливает отступы со всех сторон

---

12. WidgetStateProperty<Color>? connectorColor

Описание: Задает цвет соединительных линий между шагами. Пример:

connectorColor: MaterialStateProperty.all(Colors.grey) // Серый цвет линий между шагами

---

13. double? connectorThickness

Описание: Устанавливает толщину соединительных линий между шагами. Пример:

connectorThickness: 2.0 // Толщина соединительной линии 2.0

---

14. Widget? Function(int, StepState)? stepIconBuilder

Описание: Позволяет кастомизировать иконку шага, которая отображается в индикаторе. Пример:

stepIconBuilder: (index, state) {
  return Icon(Icons.check_circle); // Устанавливает иконку для каждого шага
}

---

15. double? stepIconHeight

Описание: Высота иконки шага. Пример:

stepIconHeight: 30.0 // Устанавливает высоту иконки шага

---

16. double? stepIconWidth

Описание: Ширина иконки шага. Пример:

stepIconWidth: 30.0 // Устанавливает ширину иконки шага

---

17. EdgeInsets? stepIconMargin

Описание: Отступы вокруг иконки шага. Пример:

stepIconMargin: EdgeInsets.symmetric(vertical: 8.0) // Вертикальные отступы иконки

---

Итог

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