es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo obtener múltiples valores de DropdownButtonFormField en Flutter?

24 Jul, 2023 Programación

Seleccionando un elemento del menú desplegable, quiero mostrar sus valores múltiples dentro de campos de texto en Flutter. Por ejemplo, si selecciono “escuela” se mostrará su nombre, ubicación y número de contacto, por lo que necesito recopilar múltiples valores de ese elemento. ¿Cómo puedo tener múltiples valores de dropDownMenuItem para mostrar múltiples valores?
Por ejemplo, el elemento de la lista de escuelas se muestra a continuación:

"SchoolList": [
  {
    "name": "escuela1",
    "location": "ubicación1",
    "contacto_no": "dirección1"
  },
  {
    "name": "escuela2",
    "location": "ubicación2",
    "contacto_no": "dirección2"
  },
  {
    "name": "escuela3",
    "location": "ubicación3",
    "contacto_no": "dirección3"
  },
],
Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para mostrar múltiples valores dentro de campos de texto después de seleccionar una opción del menú desplegable, primero debes crear un mapa con los pares de clave y valor para los campos que deseas mostrar. Por ejemplo, para el elemento de la lista de escuelas, puedes crear un mapa como este:

    Map<string, string=""> schoolDetails = {
  "name": "",
  "location": "",
  "contact_no": "",
};

    Luego, puedes establecer los valores de los campos en el mapa basándote en la opción seleccionada del menú desplegable. Puedes hacer esto creando una función que tome el valor seleccionado y establezca los detalles correspondientes en el mapa. Esta función puede ser llamada cada vez que se seleccione una nueva opción del menú desplegable. Aquí tienes un ejemplo de una función así:

    void onSchoolSelected(String selectedSchool) {
  for (var school in SchoolList) {
    if (school["name"] == selectedSchool) {
      schoolDetails["name"] = school["name"];
      schoolDetails["location"] = school["location"];
      schoolDetails["contact_no"] = school["contact_no"];
      break;
    }
  }
}

    Luego, puedes usar el mapa schoolDetails para mostrar los valores en los campos de texto. Aquí tienes un ejemplo de cómo puedes hacerlo:

    DropdownButton<string>(
  value: selectedSchool,
  items: SchoolList.map((school) {
    return DropdownMenuItem<string>(
      value: school["name"],
      child: Text(school["name"]),
    );
  }).toList(),
  onChanged: (value) {
    setState(() {
      selectedSchool = value;
      onSchoolSelected(selectedSchool);
    });
  },
),
TextFormField(
  decoration: InputDecoration(labelText: "Nombre"),
  controller: TextEditingController(text: schoolDetails["name"]),
),
TextFormField(
  decoration: InputDecoration(labelText: "Ubicación"),
  controller: TextEditingController(text: schoolDetails["location"]),
),
TextFormField(
  decoration: InputDecoration(labelText: "Número de contacto"),
  controller: TextEditingController(text: schoolDetails["contact_no"]),
),

    Con esta configuración, cada vez que se seleccione una nueva opción del menú desplegable, los campos de texto se actualizarán para mostrar los detalles correspondientes de esa opción.</string,>

Comments are closed.