Flutter学习笔记

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
上一篇下一篇

猜你喜欢

热点阅读