dashboard_card.dart

Go to the documentation of this file.

import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:go_router/go_router.dart';
import 'dart:math' as math;
 
import '../../../domain/entities/dashboard_item_entity.dart';
 
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) {
    setState(() => _isPressed = true);
    _controller.forward();
  }
 
  void _handleTapUp(TapUpDetails details) {
    setState(() => _isPressed = false);
    _controller.reverse();
    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;
    final gap = 19.0;
    final containerSize = size - (gap * 2);
 
    return AnimatedBuilder(
      animation: _scaleAnimation,
      builder: (context, child) => Transform.scale(
        scale: _scaleAnimation.value,
        child: child,
      ),
      child: GestureDetector(
        onTapDown: _handleTapDown,
        onTapUp: _handleTapUp,
        onTapCancel: _handleTapCancel,
        child: SizedBox(
          height: size,
          width: size,
          child: Stack(
            alignment: Alignment.center,
            children: [
              CustomPaint(
                size: Size(size, size),
                painter: CircularProgressPainter(
                  progress: 0.75,
                  progressColor: Theme.of(context).colorScheme.primary,
                  strokeWidth: 1.0,
                ),
              ),
              Container(
                height: containerSize,
                width: containerSize,
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                ),
                child: Stack(
                  children: [
                    ClipRRect(
                      borderRadius: BorderRadius.circular(800),
                      child: BackdropFilter(
                        filter: ImageFilter.blur(
                          sigmaX: 20,
                          sigmaY: 20,
                        ),
                        child: 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: Theme.of(context)
                                        .colorScheme
                                        .primary
                                        .withOpacity(0.11),
                                    borderRadius: BorderRadius.circular(16),
                                  ),
                                  child: Icon(
                                    widget.item.icon,
                                    color:
                                        Theme.of(context).colorScheme.primary,
                                    size: 23,
                                  ),
                                ),
                                SizedBox(height: 9.sp),
                                Text(
                                  widget.item.title,
                                  textAlign: TextAlign.center,
                                  style: Theme.of(context)
                                      .textTheme
                                      .bodySmall
                                      ?.copyWith(
                                        fontSize: 10.sp,
                                        color: Theme.of(context).hintColor,
                                      ),
                                  maxLines: 2,
                                ),
                              ],
                            ),
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
              // Pressed state overlay
              if (_isPressed)
                Container(
                  height: containerSize,
                  width: containerSize,
                  decoration: BoxDecoration(
                    color: widget.item.color.withOpacity(0.11),
                    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 / 2;
 
    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;
}