JSON data coming from API not showing in the dropdownlist

Question

I am using JSON API to get the data into my dropdownlist in Flutter. But whenever I am clicking on the dropdownlist the data does not appear in the list.

Following is my code:

class ItemSelection extends StatefulWidget{

  @override
  _ItemSelectionState createState() => _ItemSelectionState();
}

class _ItemSelectionState extends State<ItemSelection> {

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      body: Container(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width,
        padding: EdgeInsets.all(20.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Text("Dropdown",
              style: TextStyle(
                fontSize: 20.0,
              ),
              textAlign: TextAlign.center,
            ),
            SizedBox(
              height: 20.0,
            ),
            DropDownField(
              controller: cityselected,
              hintText: "Select an item",
              enabled: true,
              itemsVisibleInDropdown: 5,
              items: items,
              onValueChanged: (value){
                setState(() {
                  selectedcity = value;
                });
              }
            )
          ],
        ),
      ),
    );
  }
}

final List<String> items = [];
Future getitem() async {
  var response = await http.get(
      "basic json url here",
      headers: {
        "Accept": "application/json"
      }
  );
  if(response.statusCode == 200){
      List<GetItem> getitem = getItemFromJson(response.body);
      for(int i =0; i< getitem.length; i++){
          items.add(getitem[i].itemName);
      }
      print(items);
  }

}

GetItem.dart:

import 'dart:convert';

List<GetItem> getItemFromJson(String str) => List<GetItem>.from(json.decode(str).map((x) => GetItem.fromJson(x)));

String getItemToJson(List<GetItem> data) => json.encode(List<dynamic>.from(data.map((x) => x.toJson())));

class GetItem {
  GetItem({
    this.sLNo,
    this.itemName,
    this.category,
  });

  String sLNo;
  String itemName;
  String category;

  factory GetItem.fromJson(Map<String, dynamic> json) => GetItem(
    sLNo: json["S/L NO"],
    itemName: json["Item Name"] == null ? null : json["Item Name"],
    category: json["Category"] == null ? null : json["Category"],
  );

  Map<String, dynamic> toJson() => {
    "S/L NO": sLNo,
    "Item Name": itemName == null ? null : itemName,
    "Category": category == null ? null : category,
  };
}

As soon as I click on the dropdownlist I want the data coming from the JSON API to show in there. Can someone help me with this please?

Answer 1

You can copy paste run full code below
You can use FutureBuilder
code snippet

 Future<List<String>> _future;

 @override
 void initState() {
    _future = getitem();
 ...
 FutureBuilder(
        future: _future,
        builder: (context, AsyncSnapshot<List<String>> snapshot) {
          switch (snapshot.connectionState) {
            case ConnectionState.none:
              return Text('none');
            case ConnectionState.waiting:
              return Center(child: CircularProgressIndicator());
            case ConnectionState.active:
              return Text('');
            case ConnectionState.done:
              if (snapshot.hasError) {
                return Text(
                  '${snapshot.error}',
                  style: TextStyle(color: Colors.red),
                );
              } else {
                return DropDownField(
                    controller: cityselected,
                    hintText: "Select an item",
                    enabled: true,
                    itemsVisibleInDropdown: 5,
                    items: snapshot.data,
                    onValueChanged: (dynamic value) {
                      setState(() {
                        selectedcity = value;
                      });
                    });

working demo

full code

import 'package:flutter/material.dart';
import 'dart:convert';
import 'package:dropdownfield/dropdownfield.dart';
import 'package:http/http.dart' as http;

List<GetItem> getItemFromJson(String str) =>
    List<GetItem>.from(json.decode(str).map((x) => GetItem.fromJson(x)));

String getItemToJson(List<GetItem> data) =>
    json.encode(List<dynamic>.from(data.map((x) => x.toJson())));

class GetItem {
  GetItem({
    this.sLNo,
    this.itemName,
    this.category,
  });

  String sLNo;
  String itemName;
  String category;

  factory GetItem.fromJson(Map<String, dynamic> json) => GetItem(
        sLNo: json["S/L NO"],
        itemName: json["Item Name"] == null ? null : json["Item Name"],
        category: json["Category"] == null ? null : json["Category"],
      );

  Map<String, dynamic> toJson() => {
        "S/L NO": sLNo,
        "Item Name": itemName == null ? null : itemName,
        "Category": category == null ? null : category,
      };
}

class ItemSelection extends StatefulWidget {
  @override
  _ItemSelectionState createState() => _ItemSelectionState();
}

class _ItemSelectionState extends State<ItemSelection> {
  TextEditingController cityselected = TextEditingController();
  String selectedcity;
  Future<List<String>> _future;

  @override
  void initState() {
    _future = getitem();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width,
        padding: EdgeInsets.all(20.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Text(
              "Dropdown",
              style: TextStyle(
                fontSize: 20.0,
              ),
              textAlign: TextAlign.center,
            ),
            SizedBox(
              height: 20.0,
            ),
            FutureBuilder(
                future: _future,
                builder: (context, AsyncSnapshot<List<String>> snapshot) {
                  switch (snapshot.connectionState) {
                    case ConnectionState.none:
                      return Text('none');
                    case ConnectionState.waiting:
                      return Center(child: CircularProgressIndicator());
                    case ConnectionState.active:
                      return Text('');
                    case ConnectionState.done:
                      if (snapshot.hasError) {
                        return Text(
                          '${snapshot.error}',
                          style: TextStyle(color: Colors.red),
                        );
                      } else {
                        return DropDownField(
                            controller: cityselected,
                            hintText: "Select an item",
                            enabled: true,
                            itemsVisibleInDropdown: 5,
                            items: snapshot.data,
                            onValueChanged: (dynamic value) {
                              setState(() {
                                selectedcity = value;
                              });
                            });
                      }
                  }
                })
          ],
        ),
      ),
    );
  }
}

final List<String> items = [];
Future<List<String>> getitem() async {
  /*var response = await http
      .get("basic json url here", headers: {"Accept": "application/json"});*/

  String jsonString = '''
  [{
"S/L NO":"1",
"Item Name":"item 1",
"Category": "c1"
},
{
"S/L NO":"2",
"Item Name":"item 2",
"Category": "c2"
},
{
"S/L NO":"3",
"Item Name":"item 3",
"Category": "c3"
},
{
"S/L NO":"4",
"Item Name":"item 4",
"Category": "c4"
},
{
"S/L NO":"5",
"Item Name":"item 5",
"Category": "c5"
}
]
  ''';
  http.Response response = http.Response(jsonString, 200);
  if (response.statusCode == 200) {
    List<GetItem> getitem = getItemFromJson(response.body);
    print(getitem.length);

    for (int i = 0; i < getitem.length; i++) {
      items.add(getitem[i].itemName);
    }
  }

  return items;
}

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: ItemSelection(),
    );
  }
}

Answer 2

setState(() {
  for(int i =0; i< getitem.length; i++){
      items.add(getitem[i].itemName);
  }
});