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());
},
)),
Horizontal

Github linki: Flutter Stepper

İnternet sitesi https://www.merttoptas.com
Yazı oluşturuldu 17

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Benzer yazılar

Aramak istediğinizi üstte yazmaya başlayın ve aramak için enter tuşuna basın. İptal için ESC tuşuna basın.

Üste dön
%d blogcu bunu beğendi: