Виджет Stepper

Виджет Stepper рисует последовательность шагов из Step. Список шагов передают в steps, номер активного - в currentStep, расположение - в type из StepperType. Переходы обрабатывают в onStepContinue и onStepCancel.

Синтаксис

Stepper(
	currentStep: 0,
	onStepContinue: () {},
	onStepCancel: () {},
	steps: [
		Step(title: Text('abcde'), content: Text('12345')),
	],
)

Параметры

Параметр	Описание
`steps`	Список шагов мастера.
`currentStep`	Индекс открытого шага.
`onStepContinue`	Нажатие «Продолжить» на активном шаге.
`type`	Вертикальный или горизонтальный `StepperType`.

Пример

Давайте покажем мастер из двух шагов:

import 'package:flutter/material.dart';

void main()
{
	runApp(const MaterialApp(home: StepperDemo()));
}

class StepperDemo extends StatefulWidget
{
	const StepperDemo({super.key});

	@override
	State<StepperDemo> createState() => _StepperDemoState();
}

class _StepperDemoState extends State<StepperDemo>
{
	int step = 0;

	@override
	Widget build(BuildContext context)
	{
		return Scaffold(
			body: Stepper(
				currentStep: step,
				onStepContinue: () {
					setState(() {
						if (step < 1) step++;
					});
				},
				onStepCancel: () {
					setState(() {
						if (step > 0) step--;
					});
				},
				steps: [
					Step(title: Text('abcde'), content: Text('12345')),
					Step(title: Text('12345'), content: Text('abcde')),
				],
			),
		);
	}
}

Кнопки внизу шага переключают currentStep между 0 и 1.

Пример

Давайте включим горизонтальный тип:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: Stepper(
					type: StepperType.horizontal,
					currentStep: 0,
					onStepContinue: () {},
					onStepCancel: () {},
					steps: [
						Step(title: Text('abcde'), content: SizedBox.shrink()),
						Step(title: Text('12345'), content: SizedBox.shrink()),
					],
				),
			),
		),
	);
}

Заголовки шагов выстроятся в ряд.

Смотрите также

виджет Step,
которым описывают один шаг мастера
перечисление StepperType,
которое задаёт вертикальный или горизонтальный вид
виджет LinearProgressIndicator,
который показывает прогресс внутри шага
виджет ElevatedButton,
которым заменяют стандартные кнопки мастера