- Stepper – это виджет, отображающий ход выполнения последовательности шагов.
- Пошаговые операции особенно полезны в случае форм, где один шаг требует выполнения другого или когда необходимо выполнить несколько шагов, чтобы отправить всю форму.
- Flutter stepper поможет вам провести пользователя через процесс, предусмотренный приложением, например платежный шлюз, где мы шаг за шагом собираем данные пользователя, а затем совершаем транзакции.
Полный исходный код
main.dart
импортировать ‘package:flutter/material.dart’;
пустая функция() {
запустить приложение (Мое приложение ());
}
класс MyApp расширяет StatelessWidget {
@переопределить
Сборка виджета (контекст BuildContext) {
вернуть MaterialApp(
название: «Шаговое приложение»,
// Домой
дом: мой дом ()
);
}
}
класс MyHome расширяет StatefulWidget {
@переопределить
MyHomeState createState() => MyHomeState();
}
класс MyHomeState расширяет State‹MyHome› {
// инициируем шаг в 0-ю позицию
интервал текущий_шаг = 0;
Список‹Шаг› my_steps = [
Шаг(
// Название шага
title: Text("Скачать приложение"),
содержимое: текст («Приложение Play Store»),
активен: правда),
Шаг(
title: Text("Установить приложение"),
содержимое: Текст("Установка..."),
состояние: StepState.indexed,
активен: правда),
Шаг(
title: Text("Выберите приложение"),
содержание: текст («Facebook»),
активен: правда),
Шаг(
title: Text("Оплатить"),
content: Text("Введите данные транзакции..."),
активен: правда),
Шаг(
title: Text("Выйти из приложения!!!"),
content: Text("Покупка успешно завершена"),
активен: правда),
];
@переопределить
Сборка виджета (контекст BuildContext) {
вернуть эшафот(
// панель приложений
панель приложения: панель приложения (
// Заголовок
title: Текст («Степпер»),
),
// Тело
тело: Контейнер(
ребенок: Степпер(
текущий шаг: this.current_step,
шаги: мои_шаги,
тип: StepperType.vertical,
onStepTapped: (шаг) {
setState (() {
текущий_шаг = шаг;
});
print("onStepTapped: " + step.toString());
},
onStepCancel: () {
setState (() {
если (текущий_шаг › 0) {
текущий_шаг = текущий_шаг — 1;
} еще {
текущий_шаг = 0;
}
});
print("onStepCancel : " + current_step.toString());
},
onStepContinue: () {
setState (() {
если (текущий_шаг ‹ мои_шаги.длина — 1) {
текущий_шаг = текущий_шаг + 1;
} еще {
текущий_шаг = 0;
}
});
print("onStepContinue: " + current_step.toString());
},
)),
);
}
}
Исходный код: - https://codeswithsunny.blogspot.com/2021/09/stepper-in-flutter.html
