course_card.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 '../../domain/entities/course_entity.dart';
 
class CourseCard extends StatelessWidget {
  final CourseEntity course;
  final VoidCallback onTap;
 
  const CourseCard({
    super.key,
    required this.course,
    required this.onTap,
  });
 
  @override
  Widget build(BuildContext context) {
    Color iconColor = _parseColor(course.iconColor ?? '#4CAF50', context);
 
    return InkWell(
      onTap: onTap,
      borderRadius: BorderRadius.circular(16.r),
      child: Container(
        padding: EdgeInsets.all(16.r),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(16.r),
          color: Theme.of(context).colorScheme.surface,
        ),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              width: 45.r,
              height: 45.r,
              decoration: BoxDecoration(
                color: iconColor.withValues(alpha: 0.11),
                borderRadius: BorderRadius.circular(16.r),
              ),
              child: Icon(
                FluentIcons.folder_16_regular,
                color: iconColor,
                size: 30.sp,
              ),
            ),
            SizedBox(height: 20.r),

            Text(
              course.title ?? '',
              maxLines: 2,
              overflow: TextOverflow.ellipsis,
              style: Theme.of(context).textTheme.titleSmall?.copyWith(
                fontWeight: FontWeight.bold,
                fontSize: 14.sp,
              ),
            ),
            SizedBox(height: 10.r),

            Align(
              alignment: Alignment.centerRight,
              child: Text(
                '${(course.progress! * 100).toInt()}%',
                style: Theme.of(context)
                    .textTheme
                    .bodySmall
                    ?.copyWith(color: iconColor),
              ),
            ),
            SizedBox(height: 5.r),

            LinearProgressIndicator(
              value: course.progress,
              backgroundColor: iconColor.withValues(alpha: 0.11),
              color: iconColor,
              valueColor: AlwaysStoppedAnimation<Color>(iconColor),
            ),
            SizedBox(height: 15.r),

            Row(
              children: [
                Icon(
                  FluentIcons.clock_16_regular,
                  size: 15.sp,
                  color: iconColor,
                ),
                SizedBox(width: 5.r),
                Text(
                  '${course.durationMinutes} min',
                  style: Theme.of(context).textTheme.bodySmall,
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
 
  Color _parseColor(String hexColor, BuildContext context) {
    try {
      hexColor = hexColor.replaceAll('#', '');
      if (hexColor.length == 6) hexColor = 'FF$hexColor';
      return Color(int.parse(hexColor, radix: 16));
    } catch (_) {
      return Theme.of(context).colorScheme.primary;
    }
  }
}