The stepper widgets help you to show or collect information from users using organized steps.
General Guidelines
-
Simply import
package:casa_vertical_stepper/casa_vertical_stepper.dart
. -
Expandable: The
isExpandable
argument controls whether the stepper is Expandable
Usage
- Expandable example:
class ExampleScreen extends StatefulWidget {
const ExampleScreen({Key? key}) : super(key: key);
@override
State<ExampleScreen> createState() => _ExampleScreenState();
}
class _ExampleScreenState extends State<ExampleScreen> {
@override
Widget build(BuildContext context) {
final stepperList = [
StepperStep(
title: 'Account Details',
leading: _checkBoxIcon(),
view: YourCustomViewHere(),
),
StepperStep(
title: 'Application review',
leading: _checkBoxIcon(isOutline: true, iconColor: primaryColor),
view: YourCustomViewHere(),
),
];
return Scaffold(
body: Column(
children: [
CasaVerticalStepperView(
steps: stepperList,
seperatorColor: const Color(0xffD2D5DF),
isExpandable: true,
showStepStatusWidget: false,
),
],
),
);
}
}
- StepStatus example:
class ExampleScreen extends StatefulWidget {
const ExampleScreen({Key? key}) : super(key: key);
@override
State<ExampleScreen> createState() => _ExampleScreenState();
}
class _ExampleScreenState extends State<ExampleScreen> {
@override
Widget build(BuildContext context) {
final stepperList = [
StepperStep(
title: 'Account Details',
leading: _checkBoxIcon(),
view: YourCustomViewHere(),
),
StepperStep(
title: 'Application review',
leading: _checkBoxIcon(isOutline: true, iconColor: primaryColor),
status: StepStatus.fail,
view: YourCustomViewHere(),
failedView: YourCustomFailViewHere(),
];
return Scaffold(
body: Column(
children: [
CasaVerticalStepperView(steps: stepperList),
],
),
);
}
}
Screenshot :-------------------------: