progress_step.dart

Go to the documentation of this file.

import 'package:fluentui_system_icons/fluentui_system_icons.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
 
import '../../../../../../../core/ui/theme/color_palette.dart';
 
class ProgressStep extends StatelessWidget {
  final String label;
  final bool isActive;
  final bool isCompleted;
  final int step;
 
  const ProgressStep({
    super.key, 
    required this.label,
    required this.isActive,
    required this.isCompleted,
    required this.step,
  });
 
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          width: 32.sp,
          height: 32.sp,
          decoration: BoxDecoration(
            color: isCompleted
                ? ColorPalette.lightGreen
                : isActive
                    ? ColorPalette.white
                    : ColorPalette.lightGrey,
            shape: BoxShape.circle,
            border: Border.all(
              color: isCompleted
                  ? ColorPalette.lightGreen
                  : isActive
                      ? ColorPalette.lightGreen
                      : ColorPalette.lightGrey,
              width: 2,
            ),
          ),
          child: Center(
            child: isCompleted
                ? Icon(FluentIcons.checkmark_12_regular, color: ColorPalette.white, size: 18.sp)
                : Text(
                    '$step',
                    style: Theme.of(context).textTheme.bodyMedium!.copyWith(
                      color: (isActive || isCompleted) ? ColorPalette.lightGreen : ColorPalette.grey,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
          ),
        ),
        SizedBox(height: 8.sp),
        Text(
          label,
          style: TextStyle(
            color: isActive ? ColorPalette.lightGreen : ColorPalette.grey,
            fontSize: 12.sp,
            fontWeight: isActive ? FontWeight.w600 : FontWeight.normal,
          ),
        ),
      ],
    );
  }
}