UI Stepper Widget

stepper_wIdget.dart

/*
 * Developer: Jorge Wander Santana Urena
 * Designer: David Rivera
 */
import 'package:flutter/material.dart';

main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) 
    => MaterialApp(
      home: Scaffold(
        body: Center(
          child: StepperWidget(
            stepLength: 4,
            currentStep: 1,
          )
        )
      )
    );
}

class StepperWidget extends StatelessWidget {
  // ex: 3 => [0,1,2]
  final int stepLength;

  // Begin from 0
  final int currentStep;

  final Color inactiveColor = Color(0xFFE5EBF4);

  StepperWidget(
      {Key key, @required this.stepLength, this.currentStep = 0})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    // step circles
    List<Widget> stepCircles = _createStepCircles(stepLength, currentStep);

    return Container(
      padding: EdgeInsets.symmetric(horizontal: 28),
      height: 20,
      child: Stack(
        alignment: Alignment.center,
        children: [
          // line track
          Row(
            children: List<Widget>.generate(
                stepLength - 1,
                (index) => Expanded(
                      child: Container(
                        height: 9,
                        color: index < currentStep
                            ? Color(0xFFFAB80E)
                            : inactiveColor,
                      ),
                    )),
          ),
          // row circles
          Row(
            children: stepCircles,
          )
        ],
      ),
    );
  }

  _createStepCircle(bool active) => Container(
        height: 20,
        width: 20,
        decoration: BoxDecoration(
            color: active ? Color(0xFFFAD10E) : inactiveColor,
            shape: BoxShape.circle),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              width: 10,
              height: 10,
              decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: active ? Colors.white : inactiveColor),
            )
          ],
        ),
      );

  List<Widget> _createStepCircles(int stepLength, int currentStep) {
    final stepCircles = <Widget>[];
    for (var i = 0; i < stepLength; i++) {
      stepCircles.add(
        _createStepCircle(i <= currentStep),
      );
      if (i != stepLength - 1)
        stepCircles.add(Expanded(
          child: SizedBox(),
        ));
    }
    return stepCircles;
  }
}