Search code examples
flutterapilistviewdropdown

I want to put my listview inside a dropdownbottom

This data is coming from an API and I would like to put all options inside the dropdown

enter image description here

can anybody help me? I'm new to flutter and I'm still learning to use

this is my code:

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('não foi possivel carregar os usuarios');
    }
  }
Solution

  • Try below answer hope its help to you. you can refer my answer here and here also for data comes from API and display it into dropdown.

    Declare variables:

    String? sid;
  List data = [];
  var urls = "https://parallelum.com.br/fipe/api/v1/carros/marcas";

    Your API call function:

    Future fetchData() async {
    var result = await http.get(Uri.parse(urls), headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json',
    });
    var jsonData = json.decode(result.body);

    setState(() {
      data = jsonData;
    });
    return jsonData;
  }

    call your API fetchData() inside initState()

    @override
  void initState() {
    fetchData();
    super.initState();
  }

    Your Dropdown Widget:

    Container(
                width: 200,
                child: InputDecorator(
                  decoration: InputDecoration(
                    border: OutlineInputBorder(),
                  ),
                  child: DropdownButtonHideUnderline(
                    child: DropdownButton(
                      isDense: true,
                      isExpanded: true,
                      value: sid,
                      hint: Text("Select Data",
                          style: TextStyle(color: Colors.black)),
                      items: data.map((list) {
                        return DropdownMenuItem(
                          child: Text(list['nome']),
                          value: list['codigo'].toString(),
                        );
                      }).toList(),
                      onChanged: (value) {
                        setState(() {
                          sid = value as String?;
                        });
                      },
                    ),
                  ),
                ),
              ),

    Your result Screen for DropdownButton -> enter image description here

    Your result Screen for Dropdown -> img