vehicle_documents_screen.dart

Go to the documentation of this file.

import 'package:fluentui_system_icons/fluentui_system_icons.dart';
import 'package:flutter/material.dart';
 
import '../../core/ui/theme/color_palette.dart';
import '../../core/ui/widgets/custom_scaffold.dart';
 
class VehicleDocumentsScreen extends StatefulWidget {
  const VehicleDocumentsScreen({super.key});
 
  @override
  State<VehicleDocumentsScreen> createState() => _VehicleDocumentsScreenState();
}
 
class _VehicleDocumentsScreenState extends State<VehicleDocumentsScreen>
    with SingleTickerProviderStateMixin {
  final List<DocumentItem> documents = [
    DocumentItem('Insurance', FluentIcons.shield_12_regular,
        Colors.green.shade400, 'Valid until Dec 2025'),
    DocumentItem(
        'Vehicle registration',
        FluentIcons.checkbox_unchecked_12_regular,
        Colors.teal.shade400,
        'Valid until Nov 2025'),
    DocumentItem(
        'Vehicle sanitization record',
        FluentIcons.vehicle_car_16_regular,
        Colors.blue.shade400,
        'Expires Jan 2025'),
    DocumentItem(
        'Minicipal permit\n(if applicable)',
        FluentIcons.text_description_16_regular,
        Colors.indigo.shade400,
        'Contract #A-12345'),
  ];
 
  @override
  Widget build(BuildContext context) {
    return CustomScaffold(
      title: "",
      backgroundColor: ColorPalette.antiFlashWhite,
      body: SingleChildScrollView(
        child: Column(
          children: [_buildHeader(), _buildDocumentsView()],
        ),
      ),
    );
  }
 
  Widget _buildHeader() {
    return Padding(
      padding: const EdgeInsets.all(20),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  const Text(
                    'Vehicle Documents',
                    style: TextStyle(
                      fontSize: 28,
                      fontWeight: FontWeight.bold,
                      color: Colors.black,
                    ),
                  ),
                  const SizedBox(height: 8),
                  Container(
                    padding:
                        const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(20),
                    ),
                    child: const Row(
                      children: [
                        Icon(Icons.check_circle,
                            color: Colors.greenAccent, size: 16),
                        SizedBox(width: 4),
                        Text(
                          'All documents up to date',
                          style: TextStyle(color: Colors.black, fontSize: 12),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ],
          ),
          // Vehicle type
          const SizedBox(height: 20),
          Container(
            padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(20),
            ),
            child: Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                Icon(FluentIcons.vehicle_car_16_regular,
                    color: Colors.blue.shade400, size: 16),
                const SizedBox(width: 4),
                const Text(
                  'Car: Toyota van',
                  style: TextStyle(color: Colors.black, fontSize: 12),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
 
  Widget _buildDocumentsView() {
    return Column(children: [
      for (int index = 0; index < documents.length; index++)
        _buildDocumentCard(documents[index]),
    ]);
  }
 
  Widget _buildDocumentCard(DocumentItem document) {
    return Container(
      margin: const EdgeInsets.only(
        bottom: 16,
        left: 20,
        right: 20,
      ),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(20),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withValues(alpha: 0.1),
            blurRadius: 20,
            offset: const Offset(0, 10),
          ),
        ],
      ),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(20),
        child: Material(
          color: Colors.transparent,
          child: InkWell(
            onTap: () {},
            child: Padding(
              padding: const EdgeInsets.all(20),
              child: Row(
                children: [
                  Container(
                    padding: const EdgeInsets.all(12),
                    decoration: BoxDecoration(
                      color: document.color.withValues(alpha: 0.1),
                      borderRadius: BorderRadius.circular(16),
                    ),
                    child: Icon(document.icon, color: document.color, size: 28),
                  ),
                  const SizedBox(width: 16),
                  Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          document.title,
                          style: const TextStyle(
                            fontSize: 18,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                        const SizedBox(height: 4),
                        Text(
                          document.subtitle,
                          style: TextStyle(
                            color: Colors.grey.shade600,
                            fontSize: 14,
                          ),
                        ),
                      ],
                    ),
                  ),
                  Container(
                    padding: const EdgeInsets.all(8),
                    decoration: BoxDecoration(
                      color: document.color.withValues(alpha: 0.1),
                      borderRadius: BorderRadius.circular(12),
                    ),
                    child: Icon(
                      Icons.download_rounded,
                      color: document.color,
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}
 
class DocumentItem {
  final String title;
  final IconData icon;
  final Color color;
  final String subtitle;
 
  DocumentItem(this.title, this.icon, this.color, this.subtitle);
}