How to add data in dropdown dynamically?-CodePudding

i have one text box when user entered some value on that text box ,API is called and i get data starting with that user entered text,data which i get from API i want that data add in drop down and user can select multiple values from that data how can i do that ?

CodePudding user response：

You can use list of widgets in this list variable also you can put http data in that list variable..

List Mylist;
var url = Uri.parse("your Api link here");

var data = await http.get(url).then((value) {
  setState(() {
    Mylist = jsonDecode(value.body);
    
  });

});DropdownButton(
    items: Mylist.map((String value) {
      return DropdownMenuItem(
      value: value,
     child: Text(value),
   );
    }).toList(),
   onChanged: (_) {},
 )

CodePudding user response：

First, we declare a Future to get Data from the API endpoint like this:

  List<Widget> listForm = []; //initialized to an empty list

  fetchFromApui(url) async {
    List<dynamic> myList = [];
    var data = await http.get(url).then((value) {
      List response = jsonDecode(value.body);
      response.map((e) => myList.add(e));
    });
  }

then will use a FutureBuilder to load the data onto the UI using the DropDownButton:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: FutureBuilder<List<dynamic>?>(
          future: fetchFromApui('https://theApiEndPointUrl'),
          builder: (context, snapshot) {
            return DropdownButton(
                items: snapshot.data!.map((e) {
              return DropdownMenuItem(
                child: Container(
                  child: Text(snapshot.data.toString()),
                ),
              );
            }).toList());
          }),
    );
  }