Widżet krokowy, który pokazuje postęp w kolejnych krokach. Steppery są szczególnie cenne ze względu na formy, w których jeden krok wymaga drugiego lub gdzie różne kroki należy zakończyć, aby przedstawić kompletną formę.
Tak wygląda proste użycie Stepper'a:
Stepper(
steps: const [
Step(
title: Text('Krok 1'),
content: Text('Informacje dla kroku 1'),
),
Aby można było przechodzić pomiędzy krokami należy zmienić StatelessWidget na StatefulWidget oraz utworzyć zmienną o nazwie _currentStep. Jest to
indeks kroków, którego zawartość jest wyświetlana.
int _currentStep = 0;
onStepTapped
Teraz musimy stworzyć parametr o nazwie onStepTapped, który jest wywoływany po dotknięciu kroku, którego indeks jest przekazywany jako argument:
Stepper(
steps: const [
Step(
title: Text('Krok 1'),
content: Text('Informacje dla kroku 1'),
),
Step(
title: Text('Krok 2'),
content: Text('Informacje dla kroku 2'),
),
Step(
title: Text('Krok 3'),
content: Text('Informacje dla kroku 3'),
),
],
onStepTapped: (int newIndex) {
setState(() {
_currentStep = newIndex;
});
},
currentStep: _currentStep,
),onStepContinue
Aby użyć przycisku CONTINUE, dzięki któremu będziemy mogli przeskakiwać do kolejnych kroków, należy użyć parametru onStepContinue:
Stepper(
steps: const [
Step(
title: Text('Krok 1'),
content: Text('Informacje dla kroku 1'),
),
Step(
title: Text('Krok 2'),
content: Text('Informacje dla kroku 2'),
),
Step(
title: Text('Krok 3'),
content: Text('Informacje dla kroku 3'),
),
],
onStepTapped: (int newIndex) {
setState(() {
_currentStep = newIndex;
});
},
currentStep: _currentStep,
onStepContinue: () {
if (_currentStep != 2) {
setState(() {
_currentStep += 1;
});
}
},
),onStepCancel
Zostało jeszcze uaktywnić przycisk CANCEL, aby to zrobić należy użyć parametru onStepCancel:
Stepper(
steps: const [
Step(
title: Text('Krok 1'),
content: Text('Informacje dla kroku 1'),
),
Step(
title: Text('Krok 2'),
content: Text('Informacje dla kroku 2'),
),
Step(
title: Text('Krok 3'),
content: Text('Informacje dla kroku 3'),
),
],
onStepTapped: (int newIndex) {
setState(() {
_currentStep = newIndex;
});
},
currentStep: _currentStep,
onStepContinue: () {
if (_currentStep != 2) {
setState(() {
_currentStep += 1;
});
}
},
onStepCancel: () {
if (_currentStep != 0) {
setState(() {
_currentStep -= 1;
});
}
},
),PODSUMOWANIE
W artykule wyjaśniłam podstawową strukturę widżetu Stepper. Możesz zmodyfikować ten kod zgodnie z własnym wyborem. To było małe wprowadzenie do Stepper z mojej strony i działa przy użyciu Fluttera. Mam nadzieję, że ten blog dostarczy ci wystarczających informacji na temat wypróbowania widżetu Stepper w twoich projektach flutter.
❤ ❤ Dzięki za przeczytanie tego artykułu ❤❤
Comentarios