Creating a dropdown from get data

Try below code hope it help to you.

Create your API Call function and variable declaration and
check your selected name of Id on console

  String userId;
  List data = List();
  String url = "https://jsonplaceholder.typicode.com/users";

  //your all api call
  Future fetchData() async {
    var result = await http.get(url, headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json',
    });
    var jsonData = json.decode(result.body);
    print(jsonData);
    setState(() {
      data = jsonData;
    });
    return jsonData;
  }
  //call your API fetchData() inside initState()
  @override
  void initState() {
    super.initState();
    fetchData();
  }

Create your Dropdown Widget

    DropdownButtonHideUnderline(
        child: DropdownButton(
          value: userId,
          hint: Text("Select Name",
              style: TextStyle(color: Colors.black)),
          items: data.map((list) {
            return DropdownMenuItem(
              child: Text(list['name']),
              value: list['id'].toString(),
            );
          }).toList(),
          onChanged: (value) {
            setState(() {
              userId = value;
              print(userId);
            });
          },
        ),
      ),

Your Dropdown look like -> enter image description here

Leave a Comment