Generated code from pixels2flutter.dev

main.dart

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Select Your Car Model',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: SelectCarModelScreen(),
    );
  }
}

class SelectCarModelScreen extends StatefulWidget {
  @override
  _SelectCarModelScreenState createState() => _SelectCarModelScreenState();
}

class _SelectCarModelScreenState extends State<SelectCarModelScreen> {
  late List<dynamic> carModels;
  late List<dynamic> filteredCarModels;
  String selectedModel = '';

  @override
  void initState() {
    super.initState();
    loadCarModels();
  }

  Future<void> loadCarModels() async {
    final String response = await rootBundle.loadString('assets/car_models.json');
    final data = await json.decode(response);
    setState(() {
      carModels = data;
      filteredCarModels = carModels;
    });
  }

  void filterSearchResults(String query) {
    if (query.isNotEmpty) {
      List<dynamic> dummyListData = [];
      carModels.forEach((item) {
        if (item['name'].toLowerCase().contains(query.toLowerCase())) {
          dummyListData.add(item);
        }
      });
      setState(() {
        filteredCarModels = dummyListData;
      });
      return;
    } else {
      setState(() {
        filteredCarModels = carModels;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Select Your Car Model'),
        leading: Icon(Icons.arrow_back),
        actions: [
          Icon(Icons.wifi),
          Icon(Icons.battery_full),
          SizedBox(width: 16),
        ],
      ),
      body: Column(
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: TextField(
              onChanged: (value) {
                filterSearchResults(value);
              },
              decoration: InputDecoration(
                labelText: "Search by Car Model",
                hintText: "Search by Car Model",
                prefixIcon: Icon(Icons.search),
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.all(Radius.circular(25.0)),
                ),
              ),
            ),
          ),
          Expanded(
            child: GridView.builder(
              padding: EdgeInsets.all(8),
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
                childAspectRatio: 1.0,
                crossAxisSpacing: 8,
                mainAxisSpacing: 8,
              ),
              itemCount: filteredCarModels.length,
              itemBuilder: (BuildContext context, int index) {
                return GestureDetector(
                  onTap: () {
                    setState(() {
                      selectedModel = filteredCarModels[index]['name'];
                    });
                  },
                  child: Container(
                    decoration: BoxDecoration(
                      border: Border.all(
                        color: selectedModel == filteredCarModels[index]['name']
                            ? Colors.green
                            : Colors.transparent,
                        width: 3,
                      ),
                      borderRadius: BorderRadius.circular(8),
                    ),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Image.network(
                          filteredCarModels[index]['image'],
                          height: 100,
                          width: 100,
                        ),
                        Text(filteredCarModels[index]['name']),
                      ],
                    ),
                  ),
                );
              },
            ),
          ),
          Container(
            width: double.infinity,
            padding: EdgeInsets.all(16),
            child: ElevatedButton(
              onPressed: () {
                if (selectedModel.isNotEmpty) {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => NextScreen(selectedModel)),
                  );
                }
              },
              child: Text('Next'),
              style: ElevatedButton.styleFrom(
                primary: Colors.green,
                padding: EdgeInsets.symmetric(vertical: 16),
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(8),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

class NextScreen extends StatelessWidget {
  final String selectedModel;

  NextScreen(this.selectedModel);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Selected Model'),
      ),
      body: Center(
        child: Text('You have selected: $selectedModel'),
      ),
    );
  }
}