#17 Tutorial Flutter Membuat Stepper Schedule

Pada tutorial Flutter yang ke-17 Bahasa Indonesia, kita akan mempelajari mengenai Stepper pada bahasa pemrograman Darat di Framework Flutter. Stepper biasa digunakan utuk menampilkan list jadwal, misalnya proses pengantaran barang, proses barang di terima dan uang di bayarkan, biasa nya stepper digunakan pada aplikasi E-Comerce dan aplikasi penjualan dengan melakukan pengiriman barang.

Untungnya Flutter telah membekali material design Stepper jadi kita tidak perlu mendownload library tambahan untuk dapat menggunakan Stepper di Flutter.

Apa Yang Akan Kita Pelajari ?

1. Membuat Dan Konfigurasi Project Flutter

2. Membuat Stepper Dengan Flutter

3. Penjelasan Kode

Membuat Dan Konfigurasi Project Flutter

Pertaman silahkan buat project Flutter terlebih dahulu, buka terminal atau cmd mu dan silahkan ketikan perintah di bawah ini utuk membuat project flutter baru :

flutter create stepper

Membuat Stepper Dengan Flutter

Setelah anda berhasil membuat project flutter anda silahkan ubah file pada lib/main.dart, menjadi seperti pada kodingan di bawah ini :

Kemudian silahkan jalankan project Flutter anda,

flutter run

Jika berhasil maka stepper kita akan seperti pada gambar di bawah ini :

Penjelasan Kode 

Kita membuat sebuah list dengan index pertama 0 untuk Stepper yang kita buat, seperti potongan kode di bawah ini :

  int _currentStep = 0;
  List<Step> step = <Step>[
    Step(title: Text('Pengepakan'), content: Text('Barang DI Pack')),
    Step(title: Text('Pengiriman'), content: Text('Pengiriman JNE')),
    Step(title: Text('Barang Di terima'), content: Text('Barang Terkirim')),
    Step(title: Text('Beri rating'), content: Text('SIlahkan beri rating')),
 
  ];

Setelah itu kita memanggilnya di Body menggunakan Widget Stepper pada flutter seperti kode di bawah ini :

Stepper(
          currentStep: _currentStep,
          steps: step,
          onStepContinue: () {
            setState(() {
              if (_currentStep < step.length - 1) {
                _currentStep++;
              }
            });
          }, 

Terakhir silahkan di explorasi dan bila ada pertanyaan atau error bug silahkan tuliskan di kolom komentar.

Baca Tutorial Flutter Dart KonsepKoding Lainnya:

#1 Pengenalan Bahasa Dart Dan Framework Flutter
#2 Tutorial Flutter: Install Dart Di Linux, Windows, Mac OS
#3 Tutorial Flutter: Dart Variable Dan Tipe Data
#4 Tutorial Flutter: Penulisan Function Dart
#5 Tutorial Flutter: Operator Dart
#6 Tutorial Flutter: Control Flow
#7 Tutorial Flutter: Dart Exceptions
#8 Tutorial Flutter: Dart Class
#9 Tutorial Flutter: Pointer Gesture

#10 Tutorial Flutter: Double Tap Gesture

#11 Tutorial Flutter Alert Dialog
#12 Tutorial Menampilkan Gambar Pada Flutter
#13 Tutorial Flutter Membuat Top TabBarView
#14 Tutorial Flutter Membuat Bottom TabBarView
#15 Tutorial Flutter Membuat Drawer Navigation
#16 Tutorial Flutter Membuat Menu Dengan Row