Flutter Stepper Tutorial

Stepper, programda kullanıcıdan adım adım işlem yaptırmasını gerektirecek formlarda kullanılmak üzere türetilen bir widget. Birden fazla adım varsa onun doldurulması açısından kolaylık sağlar.

Github linki: Flutter Stepper

1. List<Step> Oluşumu

İlk olarak, adımları oluşturmak için List nesnesiyle oluşturacağız. Burada content yapısında, TextField, text, imageview kullanabilirsiniz kullanma amacına göre zenginleştirebilirisiniz.

// şuanki adım değeri
int current_step = 0;

List<Step> my_steps = [
// new Step ile adım nesnesi açılır. 
new Step(
      title: new Text("Adım 1"),
      content: new Text("Hello!"),
      isActive: true),

new Step(
      title: new Text("Adım 2", textAlign: TextAlign.center,),
      content: new Text("World!"),
      state: StepState.editing,
      isActive: true),

new Step(
      title: new Text("Adım 3"),
      content: new Text("Hello World!"),
      isActive: true),
];

2. Stepper

Widget içinde Step i kullanmak için üç adet fonksiyonu kullanmamız gerekiyor.

1. onStepTapped()
2. onStepCancel()
3. onStepContinue()

OnStepTapped(), var olan adımı göstermek için kullanılır. onStepCancel(),  var olan adımı iptal ettiğinde ne yapılacağını ayarlamak için kullanılır. Bir önceki adıma gitmemi sağlar. onStepContinue()  ise adımı devam ettirmemizi sağlayan fonksiyondur.

@override
Widget build(BuildContext context) {
return new Scaffold(
    // Appbar
    appBar: new AppBar(
      // Title
      title: new Text("Flutter Stepper Tutorial "),
    ),
    // Body
    body: new Container(
        child: new Stepper(
          //var olan adımı, burada tanımlar.
          currentStep: this.current_step,
          //benim adımım
          steps: my_steps,
          //Stepper'in tipidir. Vertical yapmak için, vertical     //değiştirilir.
          type: StepperType.horizontal,

 onStepTapped: (step) {
    setState(() {
      current_step = step;
    });
    print("onStepTapped : " + step.toString());
  },
  onStepCancel: () {
    setState(() {
      //adımı bir öncek adıma döndürür.
if (current_step > 0) {
        current_step = current_step - 1;
      } else {
        current_step = 0;
      }
    });
    print("onStepCancel : " + current_step.toString());
  },
  onStepContinue: () {

    setState(() {
      //adımı bir sonraki adıma döndürür
if (current_step < my_steps.length - 1) {
        current_step = current_step + 1;
      } else {
        current_step = 0;
      }
    });
    print("onStepContinue : " + current_step.toString());
  },
)),

Github linki: Flutter Stepper