dashboard_card.dart

Go to the documentation of this file.

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:go_router/go_router.dart';
import 'dart:math' as math;
 
class DashboardCard extends StatefulWidget {
  final DashboardItem item;
  final double? size;
 
  const DashboardCard({
    super.key,
    required this.item,
    this.size,
  });
 
  @override
  State<DashboardCard> createState() => _DashboardCardState();
}
 
class _DashboardCardState extends State<DashboardCard>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _scaleAnimation;
  bool _isPressed = false;
 
  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(milliseconds: 150),
      vsync: this,
    );
    _scaleAnimation = Tween<double>(begin: 1.0, end: 0.95).animate(
      CurvedAnimation(
        parent: _controller,
        curve: Curves.easeInOut,
      ),
    );
  }
 
  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
 
  void _handleTapDown(TapDownDetails details) {
    if (widget.item.isEnabled ?? true) {
      setState(() => _isPressed = true);
      _controller.forward();
    }
  }
 
  void _handleTapUp(TapUpDetails details) {
    if (widget.item.isEnabled ?? true) {
      setState(() => _isPressed = false);
      _controller.reverse();
      
      if (widget.item.onTap != null) {
        widget.item.onTap!();
      } else if (widget.item.path != null) {
        context.push(widget.item.path!);
      }
    }
  }
 
  void _handleTapCancel() {
    setState(() => _isPressed = false);
    _controller.reverse();
  }
 
  @override
  Widget build(BuildContext context) {
    final size = widget.size ?? 170.sp;
 
    return AnimatedBuilder(
      animation: _scaleAnimation,
      builder: (context, child) => Transform.scale(
        scale: _scaleAnimation.value,
        child: child,
      ),
      child: GestureDetector(
        onTapDown: _handleTapDown,
        onTapUp: _handleTapUp,
        onTapCancel: _handleTapCancel,
        child: Container(
          height: size,
          width: size,
          decoration: BoxDecoration(
            color: (widget.item.isEnabled ?? true) ? Colors.white : Colors.grey.withValues(alpha: 0.3),
            shape: BoxShape.circle,
            boxShadow: [
              BoxShadow(
                color: Colors.black.withValues(alpha: 0.08),
                blurRadius: 24,
                offset: const Offset(0, 8),
                spreadRadius: 0,
              ),
            ],
          ),
          child: Stack(
            children: [
              // Circular Progress Indicator
              CustomPaint(
                size: Size(size, size),
                painter: CircularProgressPainter(
                  progress: 0.75, // You can add this to DashboardItem if needed
                  progressColor: widget.item.color,
                  strokeWidth: 3.0,
                ),
              ),
 
              Center(
                child: Padding(
                  padding: EdgeInsets.all(20.sp),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Container(
                        padding: EdgeInsets.all(12.sp),
                        decoration: BoxDecoration(
                          color: widget.item.color.withValues(alpha: 0.1),
                          borderRadius: BorderRadius.circular(16),
                        ),
                        child: Icon(
                          widget.item.icon,
                          color: (widget.item.isEnabled ?? true) 
                              ? widget.item.color 
                              : widget.item.color.withValues(alpha: 0.5),
                          size: 23,
                        ),
                      ),
                      SizedBox(height: 13.sp),
                      Text(
                        widget.item.title,
                        textAlign: TextAlign.center,
                        style: Theme.of(context)
                            .textTheme
                            .titleMedium
                            ?.copyWith(
                              fontSize: 14.sp,
                              fontWeight: FontWeight.w500,
                              color: (widget.item.isEnabled ?? true)
                                  ? Theme.of(context).colorScheme.onSurface
                                  : Theme.of(context).colorScheme.onSurface.withValues(alpha: 0.5),
                            ),
                      ),
                      if (widget.item.subtitle != null) ...[
                        SizedBox(height: 4.sp),
                        Text(
                          widget.item.subtitle!,
                          textAlign: TextAlign.center,
                          style:
                              Theme.of(context).textTheme.bodyMedium?.copyWith(
                                    color: (widget.item.isEnabled ?? true)
                                        ? Theme.of(context)
                                            .colorScheme
                                            .onSurface
                                            .withValues(alpha: 0.6)
                                        : Theme.of(context)
                                            .colorScheme
                                            .onSurface
                                            .withValues(alpha: 0.3),
                                  ),
                        ),
                      ],
                    ],
                  ),
                ),
              ),
 
              if (_isPressed)
                Positioned.fill(
                  child: Container(
                    decoration: BoxDecoration(
                      color: widget.item.color.withValues(alpha: 0.05),
                      shape: BoxShape.circle,
                    ),
                  ),
                ),
            ],
          ),
        ),
      ),
    );
  }
}
 
class CircularProgressPainter extends CustomPainter {
  final double progress;
  final Color progressColor;
  final double strokeWidth;
 
  CircularProgressPainter({
    required this.progress,
    required this.progressColor,
    this.strokeWidth = 2.0,
  });
 
  @override
  void paint(Canvas canvas, Size size) {
    final center = Offset(size.width / 2, size.height / 2);
    final radius = (size.width - strokeWidth) / 2;
 
    // Draw progress arc
    final progressPaint = Paint()
      ..color = progressColor
      ..style = PaintingStyle.stroke
      ..strokeWidth = strokeWidth
      ..strokeCap = StrokeCap.round;
 
    canvas.drawArc(
      Rect.fromCircle(center: center, radius: radius),
      -math.pi / 2,
      2 * math.pi * progress,
      false,
      progressPaint,
    );
  }
 
  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}
 
class DashboardItem {
  final String title;
  final IconData icon;
  final Color color;
  final String? subtitle;
  final String? path;
  final bool? isEnabled;
  final VoidCallback? onTap;
 
  DashboardItem({
    required this.title,
    required this.icon,
    required this.color,
    this.subtitle,
    this.path,
    this.isEnabled,
    this.onTap,
  });
}