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(
      title: 'Car Brand Selector',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: CarBrandSelector(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class CarBrandSelector extends StatefulWidget {
  @override
  _CarBrandSelectorState createState() => _CarBrandSelectorState();
}

class _CarBrandSelectorState extends State<CarBrandSelector> {
  late List<dynamic> carBrands;
  late List<dynamic> filteredCarBrands;
  String selectedBrand = '';

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

  Future<void> loadCarBrands() async {
    final String response = await rootBundle.loadString('assets/car_brands.json');
    final data = await json.decode(response);
    setState(() {
      carBrands = data;
      filteredCarBrands = carBrands;
    });
  }

  void filterSearchResults(String query) {
    if (query.isNotEmpty) {
      List<dynamic> tempList = [];
      for (var item in carBrands) {
        if (item['name'].toLowerCase().contains(query.toLowerCase())) {
          tempList.add(item);
        }
      }
      setState(() {
        filteredCarBrands = tempList;
      });
    } else {
      setState(() {
        filteredCarBrands = carBrands;
      });
    }
  }

  void selectBrand(String brand) {
    setState(() {
      selectedBrand = brand;
    });
  }

  void navigateToNextView() {
    // Implement navigation logic here
    print('Selected Brand: $selectedBrand');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Select Your Car Make'),
        leading: Icon(Icons.arrow_back),
        actions: [Icon(Icons.more_vert)],
      ),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: TextField(
              onChanged: (value) {
                filterSearchResults(value);
              },
              decoration: InputDecoration(
                labelText: "Search by Car Brand",
                hintText: "Search by Car Brand",
                prefixIcon: Icon(Icons.search),
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.all(Radius.circular(25.0)),
                ),
              ),
            ),
          ),
          Expanded(
            child: GridView.builder(
              padding: EdgeInsets.all(8),
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
                crossAxisSpacing: 8,
                mainAxisSpacing: 8,
                childAspectRatio: 1,
              ),
              itemCount: filteredCarBrands.length,
              itemBuilder: (context, index) {
                return GestureDetector(
                  onTap: () => selectBrand(filteredCarBrands[index]['name']),
                  child: Container(
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(8),
                      border: Border.all(
                        color: selectedBrand == filteredCarBrands[index]['name']
                            ? Colors.green
                            : Colors.transparent,
                        width: 2,
                      ),
                    ),
                    child: Center(
                      child: Image.network(
                        filteredCarBrands[index]['image'],
                        width: 64,
                        height: 64,
                      ),
                    ),
                  ),
                );
              },
            ),
          ),
          Container(
            width: double.infinity,
            padding: EdgeInsets.all(8),
            child: ElevatedButton(
              onPressed: navigateToNextView,
              child: Text('Next'),
              style: ElevatedButton.styleFrom(
                primary: Colors.green,
                padding: EdgeInsets.symmetric(vertical: 16),
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(8),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}