Flutter Stepper

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.green,
        primaryColor: Color(0xFF2b3840),
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: Colors.grey.shade800,
        body: Column(
          children: [
            SizedBox(height: 35.0),
            Flexible(
              flex: 2,
              child: Container(
                color: Colors.white,
                child: CustomStepper(isVertical: false),
              ),
            ),
            SizedBox(height: 35.0),
            Flexible(
              flex: 3,
              child: Container(
                color: Colors.white,
                child: CustomStepper(isVertical: true),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class CustomStepper extends StatefulWidget {
  final bool isVertical;
  const CustomStepper({Key key, this.isVertical}) : super(key: key);

  @override
  _CustomStepperState createState() => _CustomStepperState();
}

class _CustomStepperState extends State<CustomStepper> {
  var _currentStep = 0;
  var _colors = <Color>[
    Colors.pink.shade100,
    Colors.purple.shade100,
    Colors.blueAccent.shade100
  ];

  Widget _builderStepper() => Stepper(
        type: widget.isVertical ? StepperType.vertical : StepperType.horizontal,
        currentStep: _currentStep,
        onStepTapped: (var step) => setState(() => _currentStep = step),
        controlsBuilder: (BuildContext context,
            {VoidCallback onStepContinue, VoidCallback onStepCancel}) {
          return ButtonBar(
            children: <Widget>[
              OutlineButton(
                onPressed: _currentStep > 0
                    ? () => setState(() => _currentStep -= 1)
                    : null,
                hoverColor: Colors.green.shade50,
                borderSide: BorderSide(
                  width: 1.5,
                  color: Colors.green,
                ),
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(10.0),
                ),
                child: Text('BACK'),
              ),
              RaisedButton(
                onPressed: _currentStep < 2
                    ? () => setState(() => _currentStep += 1)
                    : () => setState(() => _currentStep = 0),
                hoverColor: Colors.green.shade800,
                color: _currentStep != 2 ? Colors.green : Colors.green.shade900,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(10.0),
                ),
                child: Text(_currentStep != 2 ? 'NEXT' : 'SUBMIT'),
              ),
            ],
          );
        },
//         onStepContinue:
//             _currentStep < 2 ? () => setState(() => _currentStep += 1) : null,
//         onStepCancel:
//             _currentStep > 0 ? () => setState(() => _currentStep -= 1) : null,
        steps: <Step>[
          Step(
            title: Text('Shipping'),
            subtitle: Text("Things about shipping"),
            content: Container(
              padding: EdgeInsets.all(25.0),
              decoration: BoxDecoration(
                color: _colors[_currentStep],
                borderRadius: BorderRadius.circular(10.0),
              ),
              child: Text('This is the FIRST step.'),
            ),
            isActive: _currentStep >= 0,
            state: _currentStep == 0
                ? StepState.editing
                : _currentStep > 0 ? StepState.complete : StepState.disabled,
          ),
          Step(
            title: Text('Payment'),
            subtitle: Text("Add payment info"),
            content: Container(
              padding: EdgeInsets.all(25.0),
              decoration: BoxDecoration(
                color: _colors[_currentStep],
                borderRadius: BorderRadius.circular(10.0),
              ),
              child: Text('This is the SECOND step.'),
            ),
            isActive: _currentStep >= 1,
            state: _currentStep == 1
                ? StepState.editing
                : _currentStep > 1 ? StepState.complete : StepState.disabled,
          ),
          Step(
            title: Text('Order'),
            subtitle: Text("Submit your order"),
            content: Container(
              padding: EdgeInsets.all(25.0),
              decoration: BoxDecoration(
                color: _colors[_currentStep],
                borderRadius: BorderRadius.circular(10.0),
              ),
              child: Text('This is the THIRD step.'),
            ),
            isActive: _currentStep >= 2,
            state: _currentStep == 2
                ? StepState.editing
                : _currentStep > 2 ? StepState.complete : StepState.disabled,
          ),
        ],
      );

  @override
  Widget build(BuildContext context) {
    return _builderStepper();
  }
}