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.

  • es.davy.ai/
  • Programación /
  • Cómo agregar elementos de lista json a los elementos de búsqueda desplegable en Flutter | Dart

Cómo agregar elementos de lista json a los elementos de búsqueda desplegable en Flutter | Dart

29 Jul, 2023 Programación

Estoy creando un botón desplegable con búsqueda. Así que estoy usando este paquete. Aquí con este paquete tengo un problema. La respuesta desde la API es la siguiente.

List countries = [
    {
      'id': '1',
      'name': 'Brasil',
    },
    {
      'id': '2',
      'name': 'India',
    },
    {
      'id': '3',
      'name': 'Japón',
    },
    {
      'id': '4',
      'name': 'Tokio',
    },
    {
      'id': '5',
      'name': 'Australia',
    },
    {
      'id': '6',
      'name': 'Sri Lanka',
    },
    {
      'id': '7',
      'name': 'Canadá',
    },
  ];

Mi código de desplegable es este,

body: Column(
        children: [
          DropdownSearch<string>(
            mode: Mode.MENU,
            items: countries['name'],
            showSearchBox: true,
            label: "Modo menú",
            hint: "País en modo menú",
            onChanged: (value){
               print(countries['name']);
            },
            selectedItem: "Canadá",
          ),
        ],
      ),

Aquí items: countries['name'] línea está dando un error que dice: El tipo de argumento ‘String’ no puede asignarse al parámetro de tipo ‘int’.“` Además, cuando selecciono un país, quiero imprimir el ID del país. Por ejemplo, si selecciono el país como Japón, debería imprimir 4 en la consola. Mi código no está funcionando.

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Solución para el botón de selección con búsqueda utilizando el paquete Dropdown_Search

    Para resolver este problema, sigue los siguientes pasos:

    1. La lista countries es una lista de mapas. Para obtener solo los nombres de los países, necesitamos usar la función map para extraer los valores de nombre de cada mapa en la lista. Reemplaza la propiedad items del widget DropdownSearch con el siguiente código: 
      items: countries.map((country) => country['name']).toList(),
    2. Para imprimir el ID del país seleccionado, necesitamos modificar la propiedad onChanged del widget DropdownSearch. Podemos usar la función firstWhere para encontrar el mapa con el nombre de país seleccionado y luego obtener el valor del ID de ese mapa. Reemplaza la propiedad onChanged con el siguiente código: 
      onChanged: (selectedCountry) {
 final country = countries.firstWhere((element) => element['name'] == selectedCountry);
 print(country['id']);
},

    Código final

    El código final para crear un botón de selección con búsqueda utilizando el paquete Dropdown_Search se vería así:

    body: Column(
  children: [
    DropdownSearch<string>(
      mode: Mode.MENU,
      items: countries.map((country) => country['name']).toList(),
      showSearchBox: true,
      label: "Modo menú",
      hint: "país en modo menú",
      onChanged: (selectedCountry) {
        final country = countries.firstWhere((element) => element['name'] == selectedCountry);
        print(country['id']);
      },
      selectedItem: "Canadá",
    ),
  ],
),

    ¡Eso es todo! Ahora deberías poder crear un botón de selección con búsqueda e imprimir el ID del país seleccionado.

Comments are closed.