Description:

horizontal stepper step

This is a horizontal stepper can be used to indicate the progress in multiple stage.
|
Getting started #
To integrate the HorizontalStepper into your app, you need to import the import 'package:horizontal_stepper_step/horizontal_stepper.dart';
which contains HorizontalStepper widget.
HorizontalStepper(
totalStep: 4,
completedStep: 3,
selectedColor: Colors.red,
backGroundColor: Colors.amber,
);
copied to clipboard
Widget Implementation #
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
int _totalSteps = 5;

void _incrementCounter() {
setState(() {
_counter < _totalSteps ? _counter++ : _counter--;
});
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Padding(
padding: const EdgeInsets.only(top: 40.0),
child: HorizontalStepper(
totalStep: _totalSteps,
completedStep: _counter,
selectedColor: Colors.red,
backGroundColor: Colors.blue,
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}

copied to clipboard

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter