0

Me indicaron que hiciera una búsqueda desplegable que es dependiente, una tiene que ser "Regiones" y la otra "Comunas". Todo esto tiene que venir de un JSON local. La idea es que en el primer dropdown elijas la región y en el segundo se muestre las comunas que tiene esa región. Ya tengo el primer dropdown cargado con la data de regiones.

Lo que no veo aún es cómo hago que ese segundo dropdown sea dependiente del primero y dónde debería agregarlo. Aún se me complica la jerarquía de árbol que tiene Flutter.

Home

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

  @override
  Widget build(BuildContext context) {
    HomeController controller = Get.find<HomeController>();
    var title = "HomePage";
    return Scaffold(
     body: Obx(() {
        HomeController controller = Get.find<HomeController>();
        return controller.regionList.isEmpty
            ? const Center(
                child: Text('No hay regiones'),
              )
            : Center(
                child: Padding(
                padding: const EdgeInsets.all(26),
                child: FutureBuilder<List<Region>>(
                    future: controller.getRegiones(),
                    builder: (context, snapshot) {
                      if (snapshot.hasData) {
                        List<Region>? data = snapshot.data;
                        return Column(
                          children: [
                            DropdownSearch<Region>(
                              popupProps:
                                  const PopupProps.menu(showSearchBox: true),
                              asyncItems: (String filter) =>
                                  controller.getRegiones(),
                              itemAsString: (Region u) => u.name ?? "",
                              onChanged: (Region? data) => print(data?.name),
                              dropdownDecoratorProps:
                                  const DropDownDecoratorProps(
                                dropdownSearchDecoration: InputDecoration(
                                  labelText: "Region",
                                  hintText: "Seleccione una region",
                                ),
                              ),
                            ),
                            DropdownSearch<Region>(
                              asyncItems: (String filter) =>
                                  controller.getRegiones(),
                              itemAsString: (Region u) => u.communes[1].name,
                              onChanged: (Region? data) =>
                                  print(data?.communes[1].name),
                              dropdownDecoratorProps:
                                  const DropDownDecoratorProps(
                                dropdownSearchDecoration: InputDecoration(
                                  labelText: "Comunas",
                                  hintText: "Seleccione una comuna",
                                ),
                              ),
                            )
                          ],
                        );
                      } else {
                        return const CircularProgressIndicator();
                      }
                    }),
              ));
      }),
    );
  }
}

homeController

class HomeController extends GetxController {
  final RxList<Region> regionList = <Region>[].obs;

  void setSelected(String value) {
    regionList.value = value as List<Region>;
  }

  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());
  }
}

Modelo

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" }
      ]
    }...
0

2 respuestas 2

0

Lo que yo haría es crear una lista de las comunas cuando se seleccione la región un ejemplo sería:

Supongamos que en éste dropDown tenemos seleccionada "Arica y Parinacota":

DropdownSearch<Region>(
                          popupProps:
                              const PopupProps.menu(showSearchBox: true),
                          asyncItems: (String filter) =>
                              controller.getRegiones(),
                          itemAsString: (Region u) => u.name ?? "",
                          onChanged: (Region? data) => print(data?.name),
                          dropdownDecoratorProps:
                              const DropDownDecoratorProps(
                            dropdownSearchDecoration: InputDecoration(
                              labelText: "Region",
                              hintText: "Seleccione una region",
                            ),
                          ),
                        ),

Suponiendo que tenemos seleccionada esa región, tenemos que declarar una variable de List y la vamos a dejar nula:

List<Commune>? comunas;

En la propiedad onChanged podemos implementar un if para validar que las comunas de la región seleccionada no sean nulas o vacías y luego hacer un ciclo for para agregarlas a la lista creada en el paso anterior:

onChanged: (Region? data) {
   if(data.communes != null && data.communes.isNotEmpty){
     final listaComunas = data.communes;
     comunas = [];
     for(var item in listaComunas){
        setState(() {
          comunas.add(item);
        });
     }
   }
 }

El primer Dropdown quedaría algo así:

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){
                final listaComunas = data.communes;
                comunas = [];
                for(var item in listaComunas){
                    setState(() {
                      comunas.add(item);
                    });
                }
              }
            }
              dropdownDecoratorProps: const DropDownDecoratorProps(
                dropdownSearchDecoration: InputDecoration(
                  labelText: "Region",
                  hintText: "Seleccione una region",
                ),
              ),
            ),

Sinceramente no he usado mucho DropdownSearch para hacer las modificaciones, pero con esta forma ya tendrías la lista de comunas, dentro de la variable comunas valga la redundancia, espero y esta respuesta te haya servido como guía.

2
  • Comprendo, tengo que sacar el setState porque estoy trabajando con Getx. ahora mi pregunta como le entrego las comunas al 2 dropdown. Debugeo el codigo y trae bien las comunas de la region Commented el 11 sept. 2022 a las 20:45
  • 1
    Si las comunas que te regresan no son muchas, podrías usar un dropDown nativo y solo le asignas la lista de comunas Commented el 12 sept. 2022 a las 2:35
0

Te comparto como lo realice yo


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

class RegionComuna extends StatefulWidget {
  const RegionComuna({super.key});

  @override
  State<RegionComuna> createState() => _RegionComunaState();
}

class _RegionComunaState extends State<RegionComuna> {
  late Map<dynamic, dynamic> json;
  bool cargando = true;
  String? region;
  String? comuna;

  @override
  void initState() {
    WidgetsBinding.instance.addPostFrameCallback((_) {
      obtenerJsonRegiones();
    });

    super.initState();
  }

  Future<void> obtenerJsonRegiones() async {
    json = await jsonDecode(
        await rootBundle.loadString('assets/comunas-regiones-chile.json'));

    setState(() {
      cargando = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Región/Comuna JSON'),
        ),
        body: cargando
            ? const CircularProgressIndicator()
            : Center(
                child: Column(
                  children: [
                    const Text('Seleccione Region',
                        style: TextStyle(fontSize: 30)),
                    DropdownButton(
                        isExpanded: true,
                        value: region,
                        items: regiones(),
                        onChanged: (value) {
                          setState(() {
                            region = value.toString();
                            comuna = null;
                          });
                        }),
                    const Text('Seleccione Comuna',
                        style: TextStyle(fontSize: 30)),
                    DropdownButton(
                        isExpanded: true,
                        value: comuna,
                        items: comunas(region),
                        onChanged: (value) {
                          setState(() {
                            comuna = value.toString();
                          });
                        }),
                  ],
                ),
              ));
  }

  List<DropdownMenuItem<String>> regiones() {
    List<DropdownMenuItem<String>> lista = [];
    lista.add(const DropdownMenuItem(
      value: "Seleccione",
      child: Text(
        "Seleccione",
      ),
    ));
    json.forEach((key, value) {
      for (var element in value) {
        lista.add(DropdownMenuItem(
          value: element['region'],
          child: Text(
            element['region'],
          ),
        ));
      }
    });
    return lista;
  }

  List<DropdownMenuItem<String>> comunas(region) {
    List<DropdownMenuItem<String>> lista = [];

    lista.add(const DropdownMenuItem(
      value: "Seleccione",
      child: Text(
        "Seleccione",
      ),
    ));

    json.forEach((key, value) {
      for (var element in value) {
        if (region == element['region']) {
          for (var element in element['comunas']) {
            lista.add(DropdownMenuItem(
              value: element,
              child: Text(
                element,
              ),
            ));
          }
          print(element['comuna']);
        }
      }
    });
    return lista;
  }
}

Y el archivo Json que utilice yo se encuentra en:

https://github.com/harflores/Flutter-DropDown-Dependientes-Region-Comunas/blob/main/assets/comunas-regiones-chile.json

1
  • Si bien este enlace puede responder a la pregunta, es mejor incluir las partes esenciales de la respuesta aquí y proporcionar el enlace como referencia. Las respuestas que son únicamente un enlace pueden dejar de ser válidas si la página vinculada cambia. - Desde revisión Commented el 15 dic. 2022 a las 1:52

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.