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,
        useMaterial3: true,
      ),
      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: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text('Fuel type', style: Theme.of(context).textTheme.headline6),
            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(
                    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-WysqMvOj9tzvvurocdYxYOfm.png%3Fst%3D2024-04-27T03%253A38%253A13Z%26se%3D2024-04-27T05%253A38%253A13Z%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%253A53%253A49Z%26ske%3D2024-04-27T19%253A53%253A49Z%26sks%3Db%26skv%3D2021-08-06%26sig%3D5ybV0phF8F1Gb%2FHC9TmIlr7e73miFMrCJrnbeh10RoY%253D',
                          width: 40,
                          height: 40,
                        ),
                        SizedBox(height: 8),
                        Text(fuel),
                      ],
                    ),
                  ),
                );
              }).toList(),
            ),
            SizedBox(height: 24),
            Text('Year', style: Theme.of(context).textTheme.headline6),
            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: Theme.of(context).textTheme.headline6),
            SizedBox(height: 8),
            TextField(
              controller: trimController,
              decoration: InputDecoration(
                hintText: 'Select trim',
                border: OutlineInputBorder(),
                suffixIcon: Icon(Icons.arrow_drop_down),
              ),
            ),
            Spacer(),
            SizedBox(
              width: double.infinity,
              child: ElevatedButton(
                onPressed: () {
                  // Handle the 'Done' button press
                },
                child: Text('Done'),
                style: ElevatedButton.styleFrom(
                  padding: EdgeInsets.symmetric(vertical: 16),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}