1

I want to do two dependent dropdown buttons of a list of car manufacturers(the first dropdown) and car models/brands(the second dropdown)? But when I click on a brand(the second dropdown) I want to be able to get the category of the brand, so I can print and show if it's a car, truck, bus, and so on. Been having problems implementing that.

An example of the JSON file


List _cars = [
    {
      "make": "Acura",
      "brand": [
        {"name": "CL", "category": "Coupe"},
        {"name": "ILX", "category": "Sedan"},
        {"name": "Integra", "category": "Sedan"},
        {"name": "Legend", "category": "Sedan"},
        {"name": "MDX", "category": "SUV"},
        {"name": "NSX", "category": "Coupe"},
        {"name": "RDX", "category": "SUV"},
        {"name": "RL", "category": "Sedan"},
        {"name": "RLX", "category": "Sedan"},
        {"name": "RSX", "category": "Coupe"},
        {"name": "SLX", "category": "SUV"},
        {"name": "TL", "category": "Sedan"},
        {"name": "TLX", "category": "Sedan"},
        {"name": "TSX", "category": "Sedan"},
        {"name": "Vigor", "category": "Sedan"},
        {"name": "ZDX", "category": "SUV"},
      ]
    },
    {
      "make": "Alfa Romeo",
      "brand": [
        {"name": "147", "category": "Sedan"},
        {"name": "164", "category": "Sedan"},
        {"name": "4C", "category": "Coupe"},
        {"name": "4C Spider", "category": "Convertible"},
        {"name": "Brera", "category": "Sedan"},
        {"name": "Giulia", "category": "Sedan"},
        {"name": "Giulietta", "category": "Sedan"},
        {"name": "GT", "category": "Sedan"},
        {"name": "Mito", "category": "Sedan"},
        {"name": "Stelvio", "category": "SUV"},
      ]
    }
  ];

The Model for the JSON file

class CarsModel {
  late String make;
  late List<Brand> brand;

  CarsModel({required this.make, required this.brand});

  CarsModel.fromJSON(Map<String, dynamic> json) {
    make = json['make'];
    brand = json['brand'].map<Brand>((json) => Brand.fromJSON(json)).toList();
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = Map<String, dynamic>();
    data['make'] = this.make;
    data['brand'] = this.brand;
    return data;
  }
}

class Brand {
  late String name;
  late String category;

  Brand({required this.name, required this.category});

  Brand.fromJSON(Map<String, dynamic> json) {
    name = json['name'];
    category = json['category'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = Map<String, dynamic>();
    data['name'] = this.name;
    data['category'] = this.category;

    return data;
  }
}

The Implementation

getBrands(String make) async {
    await Future.delayed(Duration(seconds: 4), () {
      print('Future.delayed');
    });

    return Future.value(_cars
        .map((map) => CarsModel.fromJSON(map))
        .where((item) => item.make == make)
        .map((e) => e.brand.map((e) => e.name))
        .expand((i) => i)
        .toList());
  }


//My problem is how to get the category based on the brand name selected
 getCategory(String make) async {
    await Future.delayed(Duration(seconds: 4), () {
      print('Future.delayed');
    });

    return Future.value(_cars
        .map((map) => Brand.fromJSON(map))
        .where((item) => item.name == make)
        .map((e) => e.category)
        .first
        .toString());
  }


  List<String> getMakes() => _cars
      .map((map) => CarsModel.fromJSON(map))
      .map((item) => item.make)
      .toList();

Calling get category

category = await getCategory(value);

This is the error i get

Unhandled Exception: type 'Null' is not a subtype of type 'String'
Oyebayo Oluwafemi
  • 11
  • 2
  • Does this answer your question? [How to code dropdowns that depend on other dropdowns - using Flutter](https://stackoverflow.com/questions/62339423/how-to-code-dropdowns-that-depend-on-other-dropdowns-using-flutter) – Md. Yeasin Sheikh Mar 26 '22 at 11:28
  • YES and NO, I can show the make of the car on the first dropdown and the Model name on the second dropdown. My issue is how to get the category of the car model based on the selected model name from the second dropdown. – Oyebayo Oluwafemi Mar 26 '22 at 13:25
  • getCategory(String make) async { await Future.delayed(Duration(seconds: 4), () { print('Future.delayed'); }); return Future.value(_cars .map((map) => Brand.fromJSON(map)) .where((item) => item.name == make) .map((e) => e.category) .first .toString()); } This is what have been trying to do, to return the category name of the selected brand name. – Oyebayo Oluwafemi Mar 26 '22 at 13:27
  • I think you can follow [this](https://stackoverflow.com/a/70082828/10157127) – Md. Yeasin Sheikh Mar 26 '22 at 13:43
  • 1
    The way I later solved it was to create a list for the category too. Then create a function to get the index of the selected model name, then get the category item of that index, since the length of both lists will always be equal. Not sure it's the right way, but that's what I came up with and it's working. – Oyebayo Oluwafemi Mar 26 '22 at 15:58

0 Answers0