Generated code from pixels2flutter.dev

main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Select Year, Fuel and Trim',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: SelectionScreen(),
    );
  }
}

class SelectionScreen extends StatefulWidget {
  @override
  _SelectionScreenState createState() => _SelectionScreenState();
}

class _SelectionScreenState extends State<SelectionScreen> {
  String? selectedFuelType;
  String? selectedYear;
  String? selectedTrim;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Select Year, Fuel and Trim'),
        leading: BackButton(),
      ),
      body: ListView(
        padding: EdgeInsets.all(16.0),
        children: [
          Text('Fuel type', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
          SizedBox(height: 16),
          Wrap(
            spacing: 8,
            children: [
              FuelTypeWidget(
                label: 'Petrol',
                iconUrl: 'https://corsproxy.io/?https%3A%2F%2Foaidalleapiprodscus.blob.core.windows.net%2Fprivate%2Forg-wSmXi5iQtZ8IT5ppyif5Bx30%2Fuser-w72LKma5wN5YGd9sEbbKRFb0%2Fimg-2I2qN144OD4FLDu92hBitxuw.png%3Fst%3D2024-04-27T04%253A15%253A21Z%26se%3D2024-04-27T06%253A15%253A21Z%26sp%3Dr%26sv%3D2021-08-06%26sr%3Db%26rscd%3Dinline%26rsct%3Dimage%2Fpng%26skoid%3D6aaadede-4fb3-4698-a8f6-684d7786b067%26sktid%3Da48cca56-e6da-484e-a814-9c849652bcb3%26skt%3D2024-04-27T04%253A26%253A56Z%26ske%3D2024-04-28T04%253A26%253A56Z%26sks%3Db%26skv%3D2021-08-06%26sig%3DnhvJ46ddUHFYweV7FCmdw6eNzy83ACldczq7FlgA%252Bcc%253D',
                isSelected: selectedFuelType == 'Petrol',
                onTap: () => setState(() => selectedFuelType = 'Petrol'),
              ),
              FuelTypeWidget(
                label: 'Diesel',
                iconUrl: 'https://corsproxy.io/?https%3A%2F%2Foaidalleapiprodscus.blob.core.windows.net%2Fprivate%2Forg-wSmXi5iQtZ8IT5ppyif5Bx30%2Fuser-w72LKma5wN5YGd9sEbbKRFb0%2Fimg-47vJPzUiGqPM5KomFKT3RQPZ.png%3Fst%3D2024-04-27T04%253A15%253A18Z%26se%3D2024-04-27T06%253A15%253A18Z%26sp%3Dr%26sv%3D2021-08-06%26sr%3Db%26rscd%3Dinline%26rsct%3Dimage%2Fpng%26skoid%3D6aaadede-4fb3-4698-a8f6-684d7786b067%26sktid%3Da48cca56-e6da-484e-a814-9c849652bcb3%26skt%3D2024-04-26T19%253A33%253A08Z%26ske%3D2024-04-27T19%253A33%253A08Z%26sks%3Db%26skv%3D2021-08-06%26sig%3DHvTbezJFn1VqFQRGes95i70kOS%252BOEpxPdwrcFZQhrFM%253D',
                isSelected: selectedFuelType == 'Diesel',
                onTap: () => setState(() => selectedFuelType = 'Diesel'),
              ),
              FuelTypeWidget(
                label: 'CNG',
                iconUrl: 'https://corsproxy.io/?https%3A%2F%2Foaidalleapiprodscus.blob.core.windows.net%2Fprivate%2Forg-wSmXi5iQtZ8IT5ppyif5Bx30%2Fuser-w72LKma5wN5YGd9sEbbKRFb0%2Fimg-dYFVMDCrcn5okehSAaVrj0Mo.png%3Fst%3D2024-04-27T04%253A15%253A21Z%26se%3D2024-04-27T06%253A15%253A21Z%26sp%3Dr%26sv%3D2021-08-06%26sr%3Db%26rscd%3Dinline%26rsct%3Dimage%2Fpng%26skoid%3D6aaadede-4fb3-4698-a8f6-684d7786b067%26sktid%3Da48cca56-e6da-484e-a814-9c849652bcb3%26skt%3D2024-04-26T05%253A17%253A16Z%26ske%3D2024-04-27T05%253A17%253A16Z%26sks%3Db%26skv%3D2021-08-06%26sig%3D6lCLUCvxOt7C3J2j76UR2k%2F%252B02nxp88ZMyKm%252BRSr27Y%253D',
                isSelected: selectedFuelType == 'CNG',
                onTap: () => setState(() => selectedFuelType = 'CNG'),
              ),
              FuelTypeWidget(
                label: 'Electric',
                iconUrl: 'https://corsproxy.io/?https%3A%2F%2Foaidalleapiprodscus.blob.core.windows.net%2Fprivate%2Forg-wSmXi5iQtZ8IT5ppyif5Bx30%2Fuser-w72LKma5wN5YGd9sEbbKRFb0%2Fimg-z1F0qqRvjg3U1urWBLJMvTqb.png%3Fst%3D2024-04-27T04%253A15%253A20Z%26se%3D2024-04-27T06%253A15%253A20Z%26sp%3Dr%26sv%3D2021-08-06%26sr%3Db%26rscd%3Dinline%26rsct%3Dimage%2Fpng%26skoid%3D6aaadede-4fb3-4698-a8f6-684d7786b067%26sktid%3Da48cca56-e6da-484e-a814-9c849652bcb3%26skt%3D2024-04-26T19%253A28%253A07Z%26ske%3D2024-04-27T19%253A28%253A07Z%26sks%3Db%26skv%3D2021-08-06%26sig%3DUkYORJuKVceX9PfjqG2lW%252B4cOwPIyTybXBs0Vr9wGk4%253D',
                isSelected: selectedFuelType == 'Electric',
                onTap: () => setState(() => selectedFuelType = 'Electric'),
              ),
            ],
          ),
          SizedBox(height: 32),
          Text('Year', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
          SizedBox(height: 8),
          DropdownButtonFormField<String>(
            value: selectedYear,
            hint: Text('Select year'),
            onChanged: (newValue) => setState(() => selectedYear = newValue),
            items: ['2021', '2020', '2019', '2018']
                .map((year) => DropdownMenuItem(value: year, child: Text(year)))
                .toList(),
          ),
          SizedBox(height: 32),
          Text('Trim', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
          SizedBox(height: 8),
          DropdownButtonFormField<String>(
            value: selectedTrim,
            hint: Text('Select trim'),
            onChanged: (newValue) => setState(() => selectedTrim = newValue),
            items: ['Standard', 'Deluxe', 'Premium']
                .map((trim) => DropdownMenuItem(value: trim, child: Text(trim)))
                .toList(),
          ),
          SizedBox(height: 32),
          ElevatedButton(
            onPressed: () {
              // Handle the 'Done' button press
            },
            child: Text('Done'),
            style: ElevatedButton.styleFrom(
              minimumSize: Size(double.infinity, 50), // double.infinity is the width and 50 is the height
            ),
          ),
        ],
      ),
    );
  }
}

class FuelTypeWidget extends StatelessWidget {
  final String label;
  final String iconUrl;
  final bool isSelected;
  final VoidCallback onTap;

  const FuelTypeWidget({
    Key? key,
    required this.label,
    required this.iconUrl,
    required this.isSelected,
    required this.onTap,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        width: 100,
        height: 100,
        decoration: BoxDecoration(
          color: isSelected ? Colors.green[100] : Colors.white,
          border: Border.all(color: isSelected ? Colors.green : Colors.grey),
          borderRadius: BorderRadius.circular(8),
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Image.network(iconUrl, width: 50, height: 50),
            SizedBox(height: 8),
            Text(label, style: TextStyle(fontSize: 16)),
          ],
        ),
      ),
    );
  }
}