DEV Community

Mohit Kumar Yadav
Mohit Kumar Yadav

Posted on • Updated on

Flutter step progress bar with dynamic total step

class StepProgressBar extends StatelessWidget {
  const StepProgressBar({
    Key key,
    this.currentStep,
    this.totalSteps,}) :super(key: key);

  final int currentStep;
  final int totalSteps;

  @override
  Widget build(BuildContext context) {

    final screenWidth = MediaQuery.of(context).size.width;
    // if you are wrapping this widget in some padding
    const leftPadding = 20.0;
    const rightPadding = 20.0;

    // width of the separete widget
    const separatedWidth = 1.0;

    return Padding(
      padding: const EdgeInsets.only(top: 20, left: leftPadding, right: rightPadding, bottom: 0),
      child: Container(
        constraints: BoxConstraints(maxHeight: 2, maxWidth: screenWidth),
        child: ListView.separated(
          shrinkWrap: true,
          scrollDirection: Axis.horizontal,
          physics: const NeverScrollableScrollPhysics(),
          itemCount: totalSteps,
          separatorBuilder: (context, index) => const SizedBox(width: separatedWidth,),
          itemBuilder: (context, position) {
            return Container(
              width: (screenWidth - ((totalSteps - 1) * separatedWidth)
                      - (leftPadding + rightPadding)) / totalSteps,
              decoration: BoxDecoration(
                color: AppTheme.nearlyWhite20,
                borderRadius: BorderRadius.circular(20)
              ),
              child: Container(
                height: 2,
                decoration: BoxDecoration(
                color: currentStep >= position ? AppTheme.lightGreen.withOpacity(0.4) : Colors.transparent,
                      borderRadius: BorderRadius.circular(20)
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

Enter fullscreen mode Exit fullscreen mode

Discussion (0)