JSON data coming from API not showing in the dropdownlist - flutter

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);
}
});