Hello Teman-teman, pada kesempatan kali ini kita akan membahas mengenai Stepper Widget. Stepper adalah widget material di flutter yang menampilkan kemajuan dalam bentuk langkah. Stepper berguna jika kita harus mengumpulkan banyak data dari pengguna. Kami dapat membagi kueri ke dalam langkah-langkah yang berbeda sehingga akan mudah bagi pengguna untuk memberikan info.
Flutter adalah toolkit UI Google untuk membuat aplikasi iOS dan Android yang indah dan dikompilasikan secara native dari satu basis kode. Untuk membangun aplikasi apa pun, kita harus mulai dengan widget /blok struktur aplikasi flutter.
Widget menggambarkan apa yang harus menyerupai pandangan mereka, mengingat konfigurasi dan keadaan mereka saat ini.menggabungkan widget teks, widget baris, widget kolom, widget kontainer, dan banyak lagi.
Setiap komponen pada layar aplikasi Flutter adalah widget. Perspektif layar sepenuhnya bergantung pada pilihan dan pengelompokan widget yang digunakan untuk membangun aplikasi. Juga, struktur kode aplikasi adalah pohon widget.
Widget Stepper:
Widget stepper material yang menampilkan kemajuan melalui serangkaian langkah. Steppers sangat berharga karena bentuk di mana satu langkah membutuhkan yang lain atau di mana berbagai langkah harus selesai untuk menyajikan formulir lengkap.
Widget adalah pembungkus yang fleksibel. class harus meneruskan CurrentStep ke widget ini tergantung pada beberapa alasan yang ditetapkan oleh tiga callback yang diberikannya.
Implementasi kode:
Sekarang kita akan membuat integer currentStep. Indeks menjadi langkah langkah saat ini yang kontennya ditampilkan.
int _currentStep = 0;
onStepTapped adalah callback yang disebut ketika langkah disadap, dengan indeksnya disahkan sebagai argumen. Kita akan membuat widget yang disadap () dan kode seperti yang ditunjukkan di bawah ini.
tapped(int step){
setState(() => _currentStep = step);
}
onStepContinue adalah callback yang disebut ketika tombol ‘lanjutkan’ disadap. Jika batal, tombol ‘Continue’ akan dinonaktifkan. Kami akan membuat widget lanjutan () dan kode, seperti yang ditunjukkan di bawah ini.
continued(){
_currentStep < 2 ?
setState(() => _currentStep += 1): null;
}
Ketika kita menekan tombol lanjutkan maka langkah akan maju ke langkah lain.
onStepCancel adalah callback yang disebut ketika tombol ‘cancel’ disadap. Jika batal, tombol ‘cancel’ akan dinonaktifkan. Kami akan membuat widget cancel() dan kode, seperti yang ditunjukkan di bawah ini.
cancel(){
_currentStep > 0 ?
setState(() => _currentStep -= 1) : null;
}
Ketika kita menekan tombol “cancel”, maka langkah akan mundur ke langkah sebelumnya.
berikut ini stepper steps
Pada langkah pertama, kita akan disebut Account sebagai judul. Pada langkah ini, kita akan membuat dua TextFormField yang disebut Alamat Email dan Kata Sandi.
Step(
title: new Text('Account'),
content: Column(
children: <Widget>[
TextFormField(
decoration:
InputDecoration(labelText: 'Email Address'),
),
TextFormField(
decoration: InputDecoration(labelText: 'Password'),
),
],
),
isActive: _currentStep >= 0,
state: _currentStep >= 0
? StepState.complete
: StepState.disabled,
),
Ketika pengguna mengetuk tombol “continue”, langkah akan maju ke langkah berikutnya. Nomor diubah menjadi ikon tick aktif. Pada langkah ini, tombol batalkan tidak akan berfungsi.
Pada langkah kedua, kita akan disebut Address sebagai judul. Pada langkah ini, kami akan membuat dua TextFormField yang disebut Alamat Rumah dan Kode Pos.
Step(
title: new Text('Address'),
content: Column(
children: <Widget>[
TextFormField(
decoration:
InputDecoration(labelText: 'Home Address'),
),
TextFormField(
decoration: InputDecoration(labelText: 'Postcode'),
),
],
),
isActive: _currentStep >= 0,
state: _currentStep >= 1
? StepState.complete
: StepState.disabled,
),
Pada langkah ini, ketika pengguna akan mengetuk tombol lanjutkan, langkah akan maju ke langkah berikutnya, dan nomor diubah menjadi ikon tick aktif. Ketika pengguna mengetuk tombol batalkan, langkah akan mundur ke langkah sebelumnya, dan ikon centang aktif diubah menjadi angka lagi.
Pada langkah terakhir, kita akan disebut Mobile Number sebagai judul. Pada langkah ini, kami akan membuat satu TextFormField yang disebut Nomor Ponsel.
Step(
title: new Text('Mobile Number'),
content: Column(
children: <Widget>[
TextFormField(
decoration:
InputDecoration(labelText: 'Mobile Number'),
),
],
),
isActive: _currentStep >= 0,
state: _currentStep >= 2
? StepState.complete
: StepState.disabled,
),
Pada langkah ini, ketika pengguna akan mengetuk tombol lanjutkan, langkah akan maju ke langkah berikutnya, dan nomor diubah menjadi ikon tick aktif. Ketika pengguna mengetuk tombol batalkan, langkah akan mundur ke langkah sebelumnya, dan ikon centang aktif diubah menjadi angka lagi.
Kami juga akan mengubah jenis arah di stepper, jadi kami membuat tombol aksi mengambang, dan pada tombol ini, kami memanggil ikon dan switchStepsType () widget.
floatingActionButton: FloatingActionButton(
child: Icon(Icons.list),
onPressed: switchStepsType,
),
Sekarang kita dapat mendefinisikan widget switchStepsType().
switchStepsType() {
setState(() => stepperType == StepperType.vertical
? stepperType = StepperType.horizontal
: stepperType = StepperType.vertical);
}
Di widget ini, kita dapat menentukan tipe stepper default sebagai vertikal, dan pengguna dapat mengetuk tombol aksi mengambang, maka stepper akan berubah vertikal ke horizontal. Ketika kita menjalankan aplikasi, kita harus mendapatkan output layar seperti tangkapan layar di bawahnya.
BERIKUT INI SOURCE CODE
main.dart
import 'package:flutter/material.dart';
import 'package:steeper_widget/homepage.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(),
);
}
}
homepage.dart
import 'package:flutter/material.dart';
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _currentStep = 0;
StepperType stepperType = StepperType.vertical;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
title: Text('Flutter Stepper Demo'),
centerTitle: true,
),
body: Container(
child: Column(
children: [
Expanded(
child: Stepper(
type: stepperType,
physics: ScrollPhysics(),
currentStep: _currentStep,
onStepTapped: (step) => tapped(step),
onStepContinue: continued,
onStepCancel: cancel,
steps: <Step>[
Step(
title: new Text('Account'),
content: Column(
children: <Widget>[
TextFormField(
decoration:
InputDecoration(labelText: 'Email Address'),
),
TextFormField(
decoration: InputDecoration(labelText: 'Password'),
),
],
),
isActive: _currentStep >= 0,
state: _currentStep >= 0
? StepState.complete
: StepState.disabled,
),
Step(
title: new Text('Address'),
content: Column(
children: <Widget>[
TextFormField(
decoration:
InputDecoration(labelText: 'Home Address'),
),
TextFormField(
decoration: InputDecoration(labelText: 'Postcode'),
),
],
),
isActive: _currentStep >= 0,
state: _currentStep >= 1
? StepState.complete
: StepState.disabled,
),
Step(
title: new Text('Mobile Number'),
content: Column(
children: <Widget>[
TextFormField(
decoration:
InputDecoration(labelText: 'Mobile Number'),
),
],
),
isActive: _currentStep >= 0,
state: _currentStep >= 2
? StepState.complete
: StepState.disabled,
),
],
),
),
],
),
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.list),
onPressed: switchStepsType,
),
);
}
switchStepsType() {
setState(() => stepperType == StepperType.vertical
? stepperType = StepperType.horizontal
: stepperType = StepperType.vertical);
}
tapped(int step) {
setState(() => _currentStep = step);
}
continued() {
_currentStep < 2 ? setState(() => _currentStep += 1) : null;
}
cancel() {
_currentStep > 0 ? setState(() => _currentStep -= 1) : null;
}
}
semoga bermanfaat sobat flutter