progress_step.dart

Go to the documentation of this file.

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:hugeicons/hugeicons.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
                ? Theme.of(context).colorScheme.primary
                : isActive
                    ? Theme.of(context).colorScheme.primary.withOpacity(0.11)
                    : Colors.transparent,
            shape: BoxShape.circle,
            border: Border.all(
              color: isCompleted
                  ? Theme.of(context).colorScheme.primary
                  : isActive
                      ? Theme.of(context).colorScheme.primary
                      : Theme.of(context).hintColor.withOpacity(0.5),
              width: 1,
            ),
          ),
          child: Center(
            child: isCompleted
                ? Icon(HugeIcons.strokeRoundedCheckmarkBadge01,
                    color: Theme.of(context).colorScheme.onPrimary, size: 18.sp)
                : Text(
                    '$step',
                    style: Theme.of(context).textTheme.bodySmall!.copyWith(
                          color: (isActive || isCompleted)
                              ? Theme.of(context).colorScheme.primary
                              : Theme.of(context).hintColor,
                        ),
                  ),
          ),
        ),
        SizedBox(height: 8.sp),
        Text(
          label,
          style: Theme.of(context).textTheme.bodySmall?.copyWith(
                color: isActive
                    ? Theme.of(context).colorScheme.primary
                    : Theme.of(context).hintColor.withOpacity(0.5),
                fontSize: 10.5.sp,
              ),
        ),
      ],
    );
  }
}