request_card.dart

Go to the documentation of this file.

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
 
import '../../../../core/UI/widgets/custom_card.dart';
import '../../../../core/UI/theme/color_palette.dart';
import '../../../models/driver_request.dart';
 
class RequestCard extends StatefulWidget {
  final DriverRequest request;
  final VoidCallback onViewMore;
 
  const RequestCard({
    super.key,
    required this.request,
    required this.onViewMore,
  });
 
  @override
  State<RequestCard> createState() => _RequestCardState();
}
 
class _RequestCardState extends State<RequestCard>
    with TickerProviderStateMixin {
  late AnimationController _animationController;
  late AnimationController _tapAnimationController;
  late Animation<double> _scaleAnimation;
  late Animation<double> _tapScaleAnimation;
  bool _isPressed = false;
 
  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      duration: const Duration(milliseconds: 300),
      vsync: this,
    );
    _tapAnimationController = AnimationController(
      duration: const Duration(milliseconds: 150),
      vsync: this,
    );
 
    _scaleAnimation = Tween<double>(
      begin: 0.8,
      end: 1.0,
    ).animate(CurvedAnimation(
      parent: _animationController,
      curve: Curves.easeOutBack,
    ));
 
    _tapScaleAnimation = Tween<double>(
      begin: 1.0,
      end: 0.95,
    ).animate(CurvedAnimation(
      parent: _tapAnimationController,
      curve: Curves.easeInOut,
    ));
 
    _animationController.forward();
  }
 
  @override
  void dispose() {
    _animationController.dispose();
    _tapAnimationController.dispose();
    super.dispose();
  }
 
  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation:
          Listenable.merge([_animationController, _tapAnimationController]),
      builder: (context, child) {
        return Transform.scale(
          scale: _scaleAnimation.value * _tapScaleAnimation.value,
          child: CustomCard(
            bgColor: ColorPalette.white,
            child: Material(
              color: Colors.transparent,
              child: InkWell(
                borderRadius: BorderRadius.circular(10),
                onTap: () {
                  _handleCardTap();
                },
                child: Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10),
                    border: Border.all(
                      color: _isPressed
                          ? ColorPalette.lightGreen.withValues(alpha: 0.3)
                          : Colors.transparent,
                      width: 2,
                    ),
                  ),
                  padding: EdgeInsets.all(7.sp),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      _buildHeader(),
                      SizedBox(height: 10.h),
                      _buildDetails(),
                    ],
                  ),
                ),
              ),
            ),
          ),
        );
      },
    );
  }
 
  void _handleCardTap() {
    setState(() => _isPressed = true);
    _tapAnimationController.forward().then((_) {
      _tapAnimationController.reverse();
    });
 
    Future.delayed(const Duration(milliseconds: 150), () {
      if (mounted) {
        setState(() => _isPressed = false);
        widget.onViewMore();
      }
    });
  }
 
  Widget _buildHeader() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Text(
          widget.request.id,
          style: TextStyle(
            fontSize: 14.sp,
            fontWeight: FontWeight.bold,
            color: ColorPalette.darkGrey,
          ),
        ),
        Container(
          padding: EdgeInsets.symmetric(horizontal: 8.w, vertical: 4.h),
          decoration: BoxDecoration(
            color: ColorPalette.lightGreen.withValues(alpha: 0.1),
            borderRadius: BorderRadius.circular(12.r),
          ),
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              Text(
                'Tap to view',
                style: TextStyle(
                  fontSize: 8.5.sp,
                  color: ColorPalette.lightGreen,
                  fontWeight: FontWeight.w500,
                ),
              ),
              SizedBox(width: 4.w),
              Icon(
                Icons.touch_app,
                size: 12.sp,
                color: ColorPalette.lightGreen,
              ),
            ],
          ),
        ),
      ],
    );
  }
 
  Widget _buildDetails() {
    return Wrap(
      spacing: 12.w,
      runSpacing: 12.h,
      children: [
        _buildDetailRow(
          icon: Icons.person,
          label: 'Driver',
          value: widget.request.driverName,
        ),
        _buildDetailRow(
          icon: Icons.person,
          label: 'Stations: ',
          value: ' ${widget.request.numberOfStations} stations',
        ),
        _buildDetailRow(
          icon: Icons.calendar_today,
          label: 'Created at:',
          value:
              '${widget.request.creationDate.hour.toString().padLeft(2, '0')}:${widget.request.creationDate.minute.toString().padLeft(2, '0')}',
        ),
      ],
    );
  }
 
  Widget _buildDetailRow({
    required IconData icon,
    required String label,
    required String value,
  }) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(
              '$label: ',
              style: TextStyle(
                fontSize: 12.sp,
                color: ColorPalette.grey,
                fontWeight: FontWeight.w500,
              ),
            ),
            Text(
              value,
              style: TextStyle(
                fontSize: 12.sp,
                fontWeight: FontWeight.w500,
                color: ColorPalette.darkGrey,
              ),
              overflow: TextOverflow.ellipsis,
            ),
          ],
        ),
      ],
    );
  }
}