Stepper in flutter.
- Stepper is a widget that displays progress through a sequence of steps.
- Steppers are particularly useful in the case of forms where one step requires the completion of another one, or where multiple steps need to be completed in order to submit the whole form.
- Flutter stepper will help you to guide the user through the process intended by the app like payment gateway where we collect the user details step by step and later on make the transactions.
Full Source Code
main.dart
import ‘package:flutter/material.dart’;
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: “Stepper App”,
// Home
home: MyHome()
);
}
}
class MyHome extends StatefulWidget {
@override
MyHomeState createState() => MyHomeState();
}
class MyHomeState extends State<MyHome> {
// init the step to 0th position
int current_step = 0;
List<Step> my_steps = [
Step(
// Title of the Step
title: Text(“Download the app”),
content: Text(“Play Store App”),
isActive: true),
Step(
title: Text(“Install the app”),
content: Text(“Installing…”),
state: StepState.indexed,
isActive: true),
Step(
title: Text(“Select the App”),
content: Text(“Facebook”),
isActive: true),
Step(
title: Text(“Make the payment”),
content: Text(“Enter transaction details…”),
isActive: true),
Step(
title: Text(“Exit the app!!!”),
content: Text(“Purchase done successfully”),
isActive: true),
];
@override
Widget build(BuildContext context) {
return Scaffold(
// Appbar
appBar: AppBar(
// Title
title: Text(“Stepper”),
),
// Body
body: Container(
child: Stepper(
currentStep: this.current_step,
steps: my_steps,
type: StepperType.vertical,
onStepTapped: (step) {
setState(() {
current_step = step;
});
print(“onStepTapped : “ + step.toString());
},
onStepCancel: () {
setState(() {
if (current_step > 0) {
current_step = current_step — 1;
} else {
current_step = 0;
}
});
print(“onStepCancel : “ + current_step.toString());
},
onStepContinue: () {
setState(() {
if (current_step < my_steps.length — 1) {
current_step = current_step + 1;
} else {
current_step = 0;
}
});
print(“onStepContinue : “ + current_step.toString());
},
)),
);
}
}
Source code :- https://codeswithsunny.blogspot.com/2021/09/stepper-in-flutter.html
