Stepper

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 ❤❤