step_brogress_bar.dart

Go to the documentation of this file.

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
 
class SimpleProgressBar extends StatelessWidget {
  final int totalSteps;
  final int currentStep;
 
  const SimpleProgressBar({
    super.key,
    required this.totalSteps,
    required this.currentStep,
  })  : assert(totalSteps > 0),
        assert(currentStep >= 0 && currentStep <= totalSteps);
 
  @override
  Widget build(BuildContext context) {
    final double progress = currentStep / totalSteps;
    final int percentage = (progress * 100).round();
 
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
          width: double.infinity,
          height: 8.sp,
          decoration: BoxDecoration(
            color: Theme.of(context).highlightColor.withOpacity(0.11),
            borderRadius: BorderRadius.circular(80),
          ),
          child: FractionallySizedBox(
            alignment: Alignment.centerLeft,
            widthFactor: progress,
            child: Container(
              decoration: BoxDecoration(
                color: Theme.of(context).colorScheme.primary,
                borderRadius: BorderRadius.circular(80),
              ),
            ),
          ),
        ),
        SizedBox(height: 10.sp),
        Padding(
          padding: const EdgeInsets.only(bottom: 8.0),
          child: Text(
            'Completed $percentage%',
            style: Theme.of(context).textTheme.displaySmall?.copyWith(
                  color: Theme.of(context).hintColor.withOpacity(0.6),
                  fontSize: 11.sp,
                ),
          ),
        ),
      ],
    );
  }
}