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.

Quiero poner mi ListView dentro de un DropdownButton.

05 Jun, 2023 Programación

Este datos proviene de una API y me gustaría poner todas las opciones dentro del menú desplegable.

¿Alguien me puede ayudar? Soy nuevo en Flutter y todavía estoy aprendiendo a usarlo.

Este es mi código:

class _ApiFipePageState extends State<apifipepage>{
@override
Widget build(BuildContext context) {
return Scaffold(
body: FutureBuilder<dynamic>(
future: pegarUsuarios(),
builder: (context, snapshot) {
if (snapshot.hasData) {
return ListView.builder(
itemCount: snapshot.data!.length,
itemBuilder: (context, index) {
var usuario = snapshot.data![index];
return ListTile(
title: Text(usuario['nome']),
);
});
} else if (snapshot.hasError) {
return Center(
child: Text('${snapshot.error}'),
);
}
return Center(
child: CircularProgressIndicator(),
);
},
),
);
}
pegarUsuarios() async {
var url = Uri.parse('https://parallelum.com.br/fipe/api/v1/carros/marcas');
var resposta = await http.get(url);
if (resposta.statusCode == 200) {
return jsonDecode(resposta.body);
} else {
throw Exception('no se pudo cargar los usuarios');
}
}

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para incluir todas las opciones de la API dentro del widget de menú desplegable, puede modificar su código de la siguiente manera:

    1. Agregue una variable List a su clase de estado para almacenar los valores del menú desplegable:
    class _ApiFipePageState extends State<apifipepage> {
  List<string> _dropdownValues = [];
    1. Modifique el método pegarUsuarios para rellenar esta lista con los valores de respuesta de la API:
      pegarUsuarios() async {
    try {
      var url = Uri.parse('https://parallelum.com.br/fipe/api/v1/carros/marcas');
      var resposta = await http.get(url);

      if (resposta.statusCode == 200) {
        List<dynamic> marcas = jsonDecode(resposta.body);
        for (var marca in marcas) {
          _dropdownValues.add(marca['nome']);
        }
        return marcas;
      } else {
        throw Exception('No fue posible cargar las marcas');
      }
    } catch (e) {
      throw Exception('Error al obtener datos de la API');
    }
  }

    Ahora, el método pegarUsuarios no solo devolverá la respuesta JSON decodificada, sino que también llenará _dropdownValues con la lista de nombres de marcas.

    1. En el árbol de widgets, reemplace el widget ListView.builder con el widget DropdownButton:
    @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder<dynamic>(
        future: pegarUsuarios(),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return DropdownButton<string>(
              value: _dropdownValues.isNotEmpty ? _dropdownValues[0] : null,
              items: _dropdownValues.map((value) {
                return DropdownMenuItem<string>(
                  value: value,
                  child: Text(value),
                );
              }).toList(),
              onChanged: (value) {
                setState(() {});
              },
            );
          } else if (snapshot.hasError) {
            return Center(
              child: Text('${snapshot.error}'),
            );
          }
          return Center(
            child: CircularProgressIndicator(),
          );
        },
      ),
    );
  }

    En el widget DropdownButton, establecemos la propiedad value como el primer valor en _dropdownValues (si hay alguno) y usamos la función map para crear widgets DropdownMenuItem para todos los nombres de marca en _dropdownValues. Al seleccionar un elemento, se llama a la función de devolución de llamada onChanged, que reconstruye el árbol de widgets con el valor recién establecido.

    Con estos cambios, debería poder mostrar todas las opciones de la API dentro de un menú desplegable en su aplicación Flutter.

Comments are closed.