Untitled

import 'package:flutter/material.dart';

void main() => runApp(MaterialDesignApp());

class MaterialDesignApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        colorScheme: ColorScheme.fromSwatch(primarySwatch: Colors.orange),
        textTheme: TextTheme(
          headline6: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
          bodyText2: TextStyle(fontSize: 14),
          subtitle1: TextStyle(fontWeight: FontWeight.w500),
        ),
        elevatedButtonTheme: ElevatedButtonThemeData(
          style: ElevatedButton.styleFrom(
            primary: Colors.orange,
            onPrimary: Colors.white,
            padding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(8),
            ),
          ),
        ),
      ),
      home: MaterialDesignPage(),
    );
  }
}

class MaterialDesignPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('VEHICLE LIST'),
        backgroundColor: Theme.of(context).colorScheme.primary,
        leading: Icon(Icons.notifications),
        actions: [
          IconButton(
            icon: Icon(Icons.refresh),
            onPressed: () {},
          )
        ],
      ),
      body: Column(
        children: [
          // Search Section
          Padding(
            padding: const EdgeInsets.all(12.0),
            child: Row(
              children: [
                Expanded(
                  child: DropdownButtonFormField(
                    decoration: InputDecoration(
                      filled: true,
                      fillColor: Colors.white,
                      border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(8),
                        borderSide: BorderSide.none,
                      ),
                      labelText: 'Select User',
                    ),
                    items: [
                      DropdownMenuItem(child: Text("User 1")),
                      DropdownMenuItem(child: Text("User 2")),
                    ],
                    onChanged: (value) {},
                  ),
                ),
                SizedBox(width: 8),
                Expanded(
                  child: TextField(
                    decoration: InputDecoration(
                      filled: true,
                      fillColor: Colors.white,
                      border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(8),
                        borderSide: BorderSide.none,
                      ),
                      labelText: 'Vehicle Number',
                    ),
                  ),
                ),
                SizedBox(width: 8),
                ElevatedButton(
                  onPressed: () {},
                  child: Text('Search'),
                ),
              ],
            ),
          ),
          // Status Section
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 12.0, horizontal: 16.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                StatusBox(icon: Icons.local_shipping, color: Colors.green, number: '05'),
                StatusBox(icon: Icons.local_shipping, color: Colors.red, number: '05'),
                StatusBox(icon: Icons.local_shipping, color: Colors.blue, number: '05'),
                StatusBox(icon: Icons.local_shipping, color: Colors.grey, number: '05'),
              ],
            ),
          ),
          // Vehicle List Section
          Expanded(
            child: ListView(
              children: [
                VehicleCard(
                  vehicleNumber: 'GBH1534J',
                  driverName: 'Mohamed Asik',
                  speed: '90 KM/H',
                  distance: '205 KM',
                  battery: '24V',
                  temp: '0°C',
                  fuel: '25L',
                  lastUpdate: '06-MAY-23 12:05',
                  color: Colors.green,
                ),
                VehicleCard(
                  vehicleNumber: 'GBH1534J',
                  driverName: 'Mohamed Asik',
                  speed: '90 KM/H',
                  distance: '205 KM',
                  battery: '24V',
                  temp: '0°C',
                  fuel: '25L',
                  lastUpdate: '06-MAY-23 12:05',
                  color: Colors.red,
                ),
              ],
            ),
          ),
          // Bottom Navigation
          BottomNavigationBar(
            type: BottomNavigationBarType.fixed,
            items: [
              BottomNavigationBarItem(
                icon: Icon(Icons.list),
                label: 'List',
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.map),
                label: 'Map',
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.message),
                label: 'Messages',
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.bar_chart),
                label: 'Reports',
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.person),
                label: 'Profile',
              ),
            ],
          ),
        ],
      ),
    );
  }
}

class StatusBox extends StatelessWidget {
  final IconData icon;
  final Color color;
  final String number;

  const StatusBox({
    Key? key,
    required this.icon,
    required this.color,
    required this.number,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          width: 60,
          height: 60,
          decoration: BoxDecoration(
            color: color.withOpacity(0.15),
            borderRadius: BorderRadius.circular(8),
          ),
          child: Icon(icon, color: color, size: 32),
        ),
        SizedBox(height: 8),
        Text(number, style: Theme.of(context).textTheme.headline6),
      ],
    );
  }
}

class VehicleCard extends StatelessWidget {
  final String vehicleNumber;
  final String driverName;
  final String speed;
  final String distance;
  final String battery;
  final String temp;
  final String fuel;
  final String lastUpdate;
  final Color color;

  const VehicleCard({
    Key? key,
    required this.vehicleNumber,
    required this.driverName,
    required this.speed,
    required this.distance,
    required this.battery,
    required this.temp,
    required this.fuel,
    required this.lastUpdate,
    required this.color,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 3,
      color: color.withOpacity(0.1),
      margin: EdgeInsets.all(12.0),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10.0),
      ),
      child: ListTile(
        leading: Icon(Icons.local_shipping, size: 40, color: color),
        title: Text(vehicleNumber, style: Theme.of(context).textTheme.headline6),
        subtitle: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            SizedBox(height: 8),
            Row(
              children: [
                Icon(Icons.person, size: 16),
                SizedBox(width: 4),
                Text(driverName, style: Theme.of(context).textTheme.bodyText2),
              ],
            ),
            SizedBox(height: 4),
            Row(
              children: [
                Icon(Icons.speed, size: 16),
                SizedBox(width: 4),
                Text('$speed | $distance'),
                SizedBox(width: 16),
                Icon(Icons.battery_full, size: 16),
                SizedBox(width: 4),
                Text(battery),
              ],
            ),
            SizedBox(height: 4),
            Row(
              children: [
                Icon(Icons.thermostat, size: 16),
                SizedBox(width: 4),
                Text(temp),
                SizedBox(width: 16),
                Icon(Icons.local_gas_station, size: 16),
                SizedBox(width: 4),
                Text(fuel),
              ],
            ),
            SizedBox(height: 8),
            Row(
              children: [
                Icon(Icons.access_time, size: 16),
                SizedBox(width: 4),
                Text(lastUpdate, style: Theme.of(context).textTheme.subtitle1),
              ],
            ),
          ],
        ),
      ),
    );
  }
}