How can I send data to my other dropdown?

Viewed 52

I am using a package called dropdown_search, which I need to make the first dropdown_search show me the regions of my country and when selecting an item in the second dropdown_search it shows their respective communes.

The problem I have is that it doesn't show it to me in the dropdown_search, because when doing a debug I see that the data reaches that dropdown_search.

I'm using GetX but I still don't understand it very well. If you have any suggestions or improvements I would appreciate it.

Controller

class HomeController extends GetxController {
  

  var regionList = <Region>[].obs;
  List<Commune> comunas = <Commune>[].obs;

  Future<List<Region>> getRegiones() async {
    var response = await rootBundle.loadString('assets/response.json');
    var results = (jsonDecode(response)['regions'] ?? []) as List;
    return results.map((x) => Region.fromJson(x)).toList();
  }

  @override
  Future<void> onInit() async {
    // TODO: implement onInit
    super.onInit();
    regionList.assignAll(await getRegiones());
  }

Home

class HomePage extends GetView<HomeController> {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    var title = "HomePage";
    return Scaffold(
        body: Center(
            child: Padding(
      padding: const EdgeInsets.all(26),
      child: FutureBuilder<List<Region>>(
          future: controller.getRegiones(),
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              return Column(
                children: [
                  Obx(
                    () {
                      HomeController controller = Get.put(HomeController());
                      return controller.regionList.isEmpty
                          ? const Center(
                              child: Text('No hay regiones'),
                            )
                          : DropdownSearch<Region>(
                              popupProps:
                                  const PopupProps.menu(showSearchBox: true),
                              asyncItems: (String filter) =>
                                  controller.getRegiones(),
                              itemAsString: (Region u) => u.name ?? "",
                              onChanged: (Region? data) {
                                if (data?.communes != null &&
                                    data!.communes.isNotEmpty) {
                                  controller.comunas = data.communes;
                                  print(controller.comunas
                                      .map((e) => e.name)
                                      .toList());
                                  // comunas = [];
                                  // for (var item in listaComunas) {
                                  //   comunas?.add(item);
                                  // }
                                }
                              },
                              dropdownDecoratorProps:
                                  const DropDownDecoratorProps(
                                dropdownSearchDecoration: InputDecoration(
                                  labelText: "Region",
                                  hintText: "Seleccione una region",
                                ),
                              ),
                            );
                    },
                  ),
                  Obx(() => DropdownSearch<String>(
                      popupProps: const PopupProps.menu(
                        showSelectedItems: true,
                      ),
                      items: controller.comunas.map((e) => e.name).toList(),
                      dropdownDecoratorProps: const DropDownDecoratorProps(
                        dropdownSearchDecoration: InputDecoration(
                          labelText: "Comuna",
                          hintText: "Seleccione una comuna",
                        ),
                      ),
                      onChanged: print,
                      selectedItem: controller.comunas.isNotEmpty == true
                          ? controller.comunas[0].name
                          : null))
                ],
              );
            } else {
              return const CircularProgressIndicator();
            }
          }),
    )));
  }
}


Model

import 'dart:convert';

Regiones regionesFromJson(String str) => Regiones.fromJson(json.decode(str));

String regionesToJson(Regiones data) => json.encode(data.toJson());

class Regiones {
  Regiones({
    required this.name,
    required this.regions,
  });

  String name;
  List<Region> regions;

  factory Regiones.fromJson(Map<String, dynamic> json) => Regiones(
        name: json["name"],
        regions:
            List<Region>.from(json["regions"].map((x) => Region.fromJson(x))),
      );

  Map<String, dynamic> toJson() => {
        "name": name,
        "regions": List<dynamic>.from(regions.map((x) => x.toJson())),
      };
}

class Region {
  Region({
    required this.name,
    required this.romanNumber,
    required this.number,
    required this.abbreviation,
    required this.communes,
  });

  String? name;
  String? romanNumber;
  String? number;
  String? abbreviation;
  List<Commune> communes;

  factory Region.fromJson(Map<String, dynamic> json) => Region(
        name: json["name"],
        romanNumber: json["romanNumber"],
        number: json["number"],
        abbreviation: json["abbreviation"],
        communes: List<Commune>.from(
            json["communes"].map((x) => Commune.fromJson(x))),
      );

  Map<String, dynamic> toJson() => {
        "name": name,
        "romanNumber": romanNumber,
        "number": number,
        "abbreviation": abbreviation,
        "communes": List<dynamic>.from(communes.map((x) => x.toJson())),
      };
}

class Commune {
  Commune({
    required this.name,
    required this.identifier,
  });

  String name;
  String identifier;

  factory Commune.fromJson(Map<String, dynamic> json) => Commune(
        name: json["name"],
        identifier: json["identifier"] ?? '',
      );

  Map<String, dynamic> toJson() => {
        "name": name,
        "identifier": identifier,
      };
}

Json

{
  "name": "Chile",
  "regions": [
    {
      "name": "Arica y Parinacota",
      "romanNumber": "XV",
      "number": "15",
      "abbreviation": "AP",
      "communes": [
        { "name": "Arica", "identifier": "XV-1" },
        { "name": "Camarones", "identifier": "XV-2" },
        { "name": "General Lagos", "identifier": "XV-3" },
        { "name": "Putre", "identifier": "XV-4" }
      ]
    },
    {...

Update it already loads the data in the second dropdown, but I have to do a Hot Reload to show it, why does this happen?

0 Answers
Related