Untitled

import 'package:flutter/material.dart';

void main() {
  runApp(VehicleListApp());
}

class VehicleListApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Vehicle List',
      theme: ThemeData(
        primarySwatch: Colors.orange,
      ),
      home: VehicleListPage(),
    );
  }
}

class VehicleListPage extends StatefulWidget {
  @override
  _VehicleListPageState createState() => _VehicleListPageState();
}

class _VehicleListPageState extends State<VehicleListPage> {
  String selectedUser = 'Select User';
  int _selectedIndex = 0;

  // Dummy user list for dropdown
  List<String> userList = ['Select User', 'Muhammad Asik', 'John Doe', 'Jane Smith'];

  // Dummy list of vehicles
  List<Map<String, dynamic>> vehicles = [
    {
      'number': 'GBH154J',
      'time': '06-May-23 12:05',
      'driver': 'Muhammad Asik',
      'speed': '90 KM/H | 205 KM',
      'address': '13, Kaki Bukit Road 4, Singapore 417807',
    },
    // Add more vehicles as needed
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.orangeAccent,
        leading: Icon(Icons.notifications),
        title: Text('Vehicle List'),
        actions: [
          IconButton(
            icon: Icon(Icons.refresh),
            onPressed: () {
              // Refresh action
            },
          ),
        ],
      ),
      body: Container(
        color: Colors.orange[50], // Light white background
        child: Column(
          children: [
            // Filter Section
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Row(
                children: [
                  // User Dropdown
                  Expanded(
                    child: DropdownButton<String>(
                      value: selectedUser,
                      onChanged: (String? newValue) {
                        setState(() {
                          selectedUser = newValue!;
                        });
                      },
                      items: userList.map<DropdownMenuItem<String>>((String value) {
                        return DropdownMenuItem<String>(
                          value: value,
                          child: Text(value),
                        );
                      }).toList(),
                    ),
                  ),
                  SizedBox(width: 10),
                  // Search Bar
                  Expanded(
                    flex: 2,
                    child: TextField(
                      decoration: InputDecoration(
                        labelText: 'Search Vehicle',
                        border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(10),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
            // Vehicle List
            Expanded(
              child: ListView.builder(
                itemCount: vehicles.length,
                itemBuilder: (context, index) {
                  return VehicleListItem(
                    vehicle: vehicles[index],
                  );
                },
              ),
            ),
          ],
        ),
      ),
      // Bottom Navigation Bar
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.list),
            label: 'List',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.map),
            label: 'Map',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.history),
            label: 'History',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.report),
            label: 'Report',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            label: 'Settings',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.orange,
        unselectedItemColor: Colors.grey,
        backgroundColor: Colors.orangeAccent,
        onTap: _onItemTapped,
      ),
    );
  }
}

// Vehicle List Item Widget
class VehicleListItem extends StatelessWidget {
  final Map<String, dynamic> vehicle;

  const VehicleListItem({required this.vehicle});

  @override
  Widget build(BuildContext context) {
    return Card(
      margin: EdgeInsets.all(10),
      shape: RoundedRectangleBorder(
        side: BorderSide(color: Colors.black, width: 1), // Black border
        borderRadius: BorderRadius.circular(10),
      ),
      color: Colors.white,
      child: Padding(
        padding: const EdgeInsets.all(10.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // First Row: Vehicle Icon, Vehicle Number, Time
            Row(
              children: [
                Icon(Icons.local_shipping, color: Colors.orange, size: 30),
                SizedBox(width: 10),
                Text(
                  vehicle['number'],
                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
                ),
                Spacer(),
                Icon(Icons.access_time, size: 20),
                SizedBox(width: 5),
                Text(vehicle['time']),
              ],
            ),
            SizedBox(height: 10),
            // Second Row: Driver, Speed
            Row(
              children: [
                Icon(Icons.person, color: Colors.blue),
                SizedBox(width: 5),
                Text(vehicle['driver']),
                Spacer(),
                Icon(Icons.speed, color: Colors.green),
                SizedBox(width: 5),
                Text(vehicle['speed']),
              ],
            ),
            SizedBox(height: 10),
            // Third Row: Address
            Row(
              children: [
                Icon(Icons.location_on, color: Colors.red),
                SizedBox(width: 5),
                Expanded(
                  child: Text(
                    vehicle['address'],
                    style: TextStyle(color: Colors.grey),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}