Flutter 自定义步骤控件Stepper
2019-10-07 本文已影响0人
王俏
int _currentStep = 0;
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('StepDemo'),
elevation: 0.0,
),
body: Container(
padding: EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Theme(
data: Theme.of(context).copyWith(
primaryColor: Colors.black,
),
child: Stepper(
controlsBuilder: (BuildContext context,
{VoidCallback onStepContinue, VoidCallback onStepCancel}) {
return Row(
children: <Widget>[
FlatButton(
onPressed: onStepContinue,
child: const Text('CONTINUE'),
),
FlatButton(
onPressed: onStepCancel,
child: const Text('Up Step'),
),
],
);
},
currentStep: _currentStep,
onStepTapped: (int value) {
setState(() {
_currentStep = value;
});
},
onStepContinue: () {
setState(() {
_currentStep < 2 ? _currentStep += 1 : _currentStep = 0;
});
},
onStepCancel: () {
setState(() {
_currentStep > 0 ? _currentStep -= 1 : _currentStep = 0;
});
},
steps: [
Step(
title: Text("Login"),
subtitle: Text('Login first'),
content: Text(
'Cupidatat sunt voluptate esse velit dolor voluptate elit amet pariatur et amet in.'),
isActive: _currentStep == 0,
),
Step(
title: Text("Choose Plan"),
subtitle: Text('Choose you plan'),
content: Text(
'Cupidatat sunt voluptate esse velit dolor voluptate elit amet pariatur et amet in.'),
isActive: _currentStep == 1,
),
Step(
title: Text("Confirm payment"),
subtitle: Text('Confirm your payment method'),
content: Text(
'Cupidatat sunt voluptate esse velit dolor voluptate elit amet pariatur et amet in.'),
isActive: _currentStep == 2,
)
],
),
)
],
),
),
);
}
效果图
step.png