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;
  TextEditingController yearController = TextEditingController();
  TextEditingController trimController = TextEditingController();

  @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),
          GridView.count(
            shrinkWrap: true,
            crossAxisCount: 3,
            crossAxisSpacing: 8,
            mainAxisSpacing: 8,
            children: ['Petrol', 'Diesel', 'CNG', 'Electric'].map((fuel) {
              bool isSelected = selectedFuelType == fuel;
              return GestureDetector(
                onTap: () {
                  setState(() {
                    selectedFuelType = fuel;
                  });
                },
                child: Container(
                  padding: EdgeInsets.all(8),
                  decoration: BoxDecoration(
                    color: isSelected ? Colors.green[50] : Colors.white,
                    border: Border.all(color: isSelected ? Colors.green : Colors.grey),
                    borderRadius: BorderRadius.circular(8),
                  ),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Image.network(
                        'https://corsproxy.io/?https%3A%2F%2Foaidalleapiprodscus.blob.core.windows.net%2Fprivate%2Forg-wSmXi5iQtZ8IT5ppyif5Bx30%2Fuser-w72LKma5wN5YGd9sEbbKRFb0%2Fimg-wFDpoijeBRXAZ2KkGMH02nQw.png%3Fst%3D2024-04-27T03%253A57%253A11Z%26se%3D2024-04-27T05%253A57%253A11Z%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%253A20%253A05Z%26ske%3D2024-04-27T19%253A20%253A05Z%26sks%3Db%26skv%3D2021-08-06%26sig%3D8rcPMhBchAc1ctmrmL5MNuoZeO62ylI9ILguxzqnU2s%253D',
                        width: 40,
                        height: 40,
                      ),
                      SizedBox(height: 8),
                      Text(fuel),
                    ],
                  ),
                ),
              );
            }).toList(),
          ),
          SizedBox(height: 24),
          Text('Year', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
          SizedBox(height: 8),
          TextField(
            controller: yearController,
            decoration: InputDecoration(
              hintText: 'Select year',
              border: OutlineInputBorder(),
              suffixIcon: Icon(Icons.arrow_drop_down),
            ),
          ),
          SizedBox(height: 16),
          Text('Trim', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
          SizedBox(height: 8),
          TextField(
            controller: trimController,
            decoration: InputDecoration(
              hintText: 'Select trim',
              border: OutlineInputBorder(),
              suffixIcon: Icon(Icons.arrow_drop_down),
            ),
          ),
          SizedBox(height: 24),
          ElevatedButton(
            onPressed: () {
              // Handle the 'Done' button press
            },
            child: Text('Done'),
            style: ElevatedButton.styleFrom(
              primary: Colors.green,
              minimumSize: Size(double.infinity, 50),
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(8),
              ),
            ),
          ),
        ],
      ),
    );
  }
}