how to Display Json Data in dropdownlist in flutter - flutter

Question

I have a JSON file with data that I want to display in my dropdownlist. How do I go about implementing this? I would appreciate any input. I currently have this hardcoded into my page unndes state and working but want to call it from json file. I've tried some answers on here with no luck. This is one of the errors that I got: type 'List<dynamic>' is not a subtype of type 'List<String>' Changing the code and moving stuff around only gave more errors.
class SearchFilters extends StatefulWidget {
#override
_SearchFiltersState createState() => _SearchFiltersState();
}
class _SearchFiltersState extends State<SearchFilters> {
var _propType = ["Free Standing", "Town House", "Apartment", "Vacant Land", "Ofiice", "Farm", "New Development"];
var _currentItemPropery = "Free Standing";
var _town = ["Rehoboth", "Windhoek", "Swakopmund", "Walvisbay", "Keetmanshoop", "Otjiwarongo"];
var _currentItemTown = "Rehoboth";
var _minPrice = ["N\$ 10.00", "N\$ 20.00", "N\$ 30.00", "N\$ 40.00", "N\$ 50.00"];
var _currentItemMinPrice = "N\$ 10.00";
var _maxPrice = ["N\$ 100.00", "N\$ 200.00", "N\$ 300.00", "N\$ 400.00", "N\$ 500.00"];
var _currentItemMaxPrice = "N\$ 100.00";
var _minBeds = ["1", "2"];
var _currentItemMinBeds = "1";
var _maxBeds = ["1", "2", "3", "4", "5"];
var _currentItemMaxBeds = "1";
var _baths = ["1", "2", "3", "4", "5"];
var _currentItemBaths = "1";
var _parking = ["1", "2", "3"];
var _currentItemParking = "1";
#override
Widget build(BuildContext context) {
return Flexible(
child: ListView(
scrollDirection: Axis.vertical,
shrinkWrap: true,
children: <Widget>[
Container(
// height: MediaQuery.of(context).size.height,
child: Column(
children: <Widget>[
// todo =========== Property Type =====================
Container(
margin: EdgeInsets.only(left: 24.0, right: 24.0),
alignment: Alignment.centerLeft,
child: Text(
"Property Type",
style: TextStyle(
color: Colors.grey,
fontSize: 18.0,
fontStyle: FontStyle.italic,
),
)),
SizedBox(height: 12.0),
Container(
margin: EdgeInsets.only(left: 40.0, right: 40.0),
padding: EdgeInsets.only(left: 24.0, right: 24.0),
decoration: ShapeDecoration(
shape: RoundedRectangleBorder(
side: BorderSide(
width: 2.0,
style: BorderStyle.solid,
color: Color(0xFFFA983A)),
borderRadius: BorderRadius.all(Radius.circular(12.0)),
),
),
child: DropdownButton<String>(
items: _propType.map((String dropDownStringItem) {
return DropdownMenuItem<String>(
value: dropDownStringItem,
child: Text(
dropDownStringItem,
style: TextStyle(color: Colors.black),
),
);
}).toList(),
onChanged: (String newValueSelected) {
setState(() {
this._currentItemPropery = newValueSelected;
});
},
value: _currentItemPropery,
style: TextStyle(fontSize: 18),
iconSize: 40.0,
isExpanded: true,
),
),
SizedBox(
height: 12.0,
),
// todo =========== Towns =====================
Container(
margin: EdgeInsets.only(left: 24.0, right: 24.0),
alignment: Alignment.centerLeft,
child: Text(
"Town",
style: TextStyle(
color: Colors.grey,
fontSize: 18.0,
fontStyle: FontStyle.italic,
),
),
),
SizedBox(height: 12.0),
Container(
margin: EdgeInsets.only(left: 40.0, right: 40.0),
padding: EdgeInsets.only(left: 24.0, right: 24.0),
decoration: ShapeDecoration(
shape: RoundedRectangleBorder(
side: BorderSide(
width: 2.0,
style: BorderStyle.solid,
color: Color(0xFFFA983A)),
borderRadius: BorderRadius.all(Radius.circular(12.0)),
),
),
child: DropdownButton<String>(
items: _town.map((String dropDownStringItem) {
return DropdownMenuItem<String>(
value: dropDownStringItem,
child: Text(
dropDownStringItem,
style: TextStyle(color: Colors.black),
),
);
}).toList(),
onChanged: (String newValueSelected) {
setState(() {
this._currentItemTown = newValueSelected;
});
},
value: _currentItemTown,
style: TextStyle(fontSize: 18),
iconSize: 40.0,
isExpanded: true,
),
),
SizedBox(
height: 12.0,
),
// todo =========== Min Price =====================
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
margin: EdgeInsets.only(left: 24.0),
alignment: Alignment.centerLeft,
child: Text(
"Min Price",
style: TextStyle(
color: Colors.grey,
fontSize: 18.0,
fontStyle: FontStyle.italic,
),
),
),
Container(
margin: EdgeInsets.only(right: 40.0),
padding: EdgeInsets.only(left: 24.0, right: 24.0),
decoration: ShapeDecoration(
shape: RoundedRectangleBorder(
side: BorderSide(
width: 2.0,
style: BorderStyle.solid,
color: Color(0xFFFA983A)),
borderRadius: BorderRadius.all(Radius.circular(12.0)),
),
),
child: DropdownButton<String>(
items: _minPrice.map((String dropDownStringItem) {
return DropdownMenuItem<String>(
value: dropDownStringItem,
child: Text(
dropDownStringItem,
style: TextStyle(color: Colors.black),
),
);
}).toList(),
onChanged: (String newValueSelected) {
setState(
() {
this._currentItemMinPrice = newValueSelected;
},
);
},
value: _currentItemMinPrice,
style: TextStyle(fontSize: 18),
iconSize: 40.0,
// isExpanded: true,
),
),
],
),
SizedBox(height: 12.0),
// todo =========== Max Price =====================
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
margin: EdgeInsets.only(left: 24.0),
alignment: Alignment.centerLeft,
child: Text(
"Max Price",
style: TextStyle(
color: Colors.grey,
fontSize: 18.0,
fontStyle: FontStyle.italic,
),
),
),
Container(
margin: EdgeInsets.only(right: 40.0),
padding: EdgeInsets.only(left: 24.0, right: 24.0),
decoration: ShapeDecoration(
shape: RoundedRectangleBorder(
side: BorderSide(
width: 2.0,
style: BorderStyle.solid,
color: Color(0xFFFA983A)),
borderRadius: BorderRadius.all(Radius.circular(12.0)),
),
),
child: DropdownButton<String>(
items: _maxPrice.map((String dropDownStringItem) {
return DropdownMenuItem<String>(
value: dropDownStringItem,
child: Text(
dropDownStringItem,
style: TextStyle(color: Colors.black),
),
);
}).toList(),
onChanged: (String newValueSelected) {
setState(
() {
this._currentItemMaxPrice = newValueSelected;
},
);
},
value: _currentItemMaxPrice,
style: TextStyle(fontSize: 18),
iconSize: 40.0,
// isExpanded: true,
),
),
],
),
SizedBox(height: 12.0),
// todo ================== Min Bedrooms =====================
Row(
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width / 2,
child: Column(
children: <Widget>[
Container(
margin: EdgeInsets.only(left: 24.0, right: 24.0),
alignment: Alignment.centerLeft,
child: Text(
"Min Bedrooms",
style: TextStyle(
color: Colors.grey,
fontSize: 18.0,
fontStyle: FontStyle.italic,
),
),
),
SizedBox(height: 12.0),
Container(
margin: EdgeInsets.only(left: 40.0, right: 40.0),
padding: EdgeInsets.only(left: 24.0, right: 24.0),
decoration: ShapeDecoration(
shape: RoundedRectangleBorder(
side: BorderSide(
width: 2.0,
style: BorderStyle.solid,
color: Color(0xFFFA983A)),
borderRadius:
BorderRadius.all(Radius.circular(12.0)),
),
),
child: DropdownButton<String>(
items: _minBeds.map((String dropDownStringItem) {
return DropdownMenuItem<String>(
value: dropDownStringItem,
child: Text(
dropDownStringItem,
style: TextStyle(color: Colors.black),
),
);
}).toList(),
onChanged: (String newValueSelected) {
setState(() {
this._currentItemMinBeds = newValueSelected;
});
},
value: _currentItemMinBeds,
style: TextStyle(fontSize: 18),
iconSize: 40.0,
isExpanded: true,
),
),
],
),
),
// todo ================== Max Bedrooms =====================
Container(
width: MediaQuery.of(context).size.width / 2,
child: Column(
children: <Widget>[
Container(
margin: EdgeInsets.only(left: 24.0, right: 24.0),
alignment: Alignment.centerLeft,
child: Text(
"Max Bedrooms",
style: TextStyle(
color: Colors.grey,
fontSize: 18.0,
fontStyle: FontStyle.italic,
),
),
),
SizedBox(height: 12.0),
Container(
margin: EdgeInsets.only(left: 40.0, right: 40.0),
padding: EdgeInsets.only(left: 24.0, right: 24.0),
decoration: ShapeDecoration(
shape: RoundedRectangleBorder(
side: BorderSide(
width: 2.0,
style: BorderStyle.solid,
color: Color(0xFFFA983A)),
borderRadius:
BorderRadius.all(Radius.circular(12.0)),
),
),
child: DropdownButton<String>(
items: _maxBeds.map((String dropDownStringItem) {
return DropdownMenuItem<String>(
value: dropDownStringItem,
child: Text(
dropDownStringItem,
style: TextStyle(color: Colors.black),
),
);
}).toList(),
onChanged: (String newValueSelected) {
setState(() {
this._currentItemMaxBeds = newValueSelected;
});
},
value: _currentItemMaxBeds,
style: TextStyle(fontSize: 18),
iconSize: 40.0,
isExpanded: true,
),
),
],
),
),
],
),
SizedBox(height: 12.0),
// todo ================== Bathrooms =====================
Row(
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width / 2,
child: Column(
children: <Widget>[
Container(
margin: EdgeInsets.only(left: 24.0, right: 24.0),
alignment: Alignment.centerLeft,
child: Text(
"Bathrooms",
style: TextStyle(
color: Colors.grey,
fontSize: 18.0,
fontStyle: FontStyle.italic,
),
),
),
SizedBox(height: 12.0),
Container(
margin: EdgeInsets.only(left: 40.0, right: 40.0),
padding: EdgeInsets.only(left: 24.0, right: 24.0),
decoration: ShapeDecoration(
shape: RoundedRectangleBorder(
side: BorderSide(
width: 2.0,
style: BorderStyle.solid,
color: Color(0xFFFA983A)),
borderRadius:
BorderRadius.all(Radius.circular(12.0)),
),
),
child: DropdownButton<String>(
items:
_baths.map((String dropDownStringItem) {
return DropdownMenuItem<String>(
value: dropDownStringItem,
child: Text(
dropDownStringItem,
style: TextStyle(color: Colors.black),
),
);
}).toList(),
onChanged: (String newValueSelected) {
setState(() {
this._currentItemBaths = newValueSelected;
});
},
value: _currentItemBaths,
style: TextStyle(fontSize: 18),
iconSize: 40.0,
isExpanded: true,
),
),
],
),
),
// todo ================== Parking =====================
Container(
width: MediaQuery.of(context).size.width / 2,
child: Column(
children: <Widget>[
Container(
margin: EdgeInsets.only(left: 24.0, right: 24.0),
alignment: Alignment.centerLeft,
child: Text(
"Car Spaces",
style: TextStyle(
color: Colors.grey,
fontSize: 18.0,
fontStyle: FontStyle.italic,
),
),
),
SizedBox(height: 12.0),
Container(
margin: EdgeInsets.only(left: 40.0, right: 40.0),
padding: EdgeInsets.only(left: 24.0, right: 24.0),
decoration: ShapeDecoration(
shape: RoundedRectangleBorder(
side: BorderSide(
width: 2.0,
style: BorderStyle.solid,
color: Color(0xFFFA983A)),
borderRadius:
BorderRadius.all(Radius.circular(12.0)),
),
),
child: DropdownButton<String>(
items:
_parking.map((String dropDownStringItem) {
return DropdownMenuItem<String>(
value: dropDownStringItem,
child: Text(
dropDownStringItem,
style: TextStyle(color: Colors.black),
),
);
}).toList(),
onChanged: (String newValueSelected) {
setState(() {
this._currentItemParking = newValueSelected;
});
},
value: _currentItemParking,
style: TextStyle(fontSize: 18),
iconSize: 40.0,
isExpanded: true,
),
),
],
),
),
],
),
SizedBox(height: 24.0),
// todo ================= Mail Button ====================
Container(
margin: EdgeInsets.only(left: 40, right: 40),
child: ButtonTheme(
minWidth: MediaQuery.of(context).size.width,
height: 50,
splashColor: Colors.white30,
child: RaisedButton(
elevation: 5.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
onPressed: () {},
padding: EdgeInsets.all(0.0),
color: Color(0xFFFA983A),
child: Text(
"SEARCH",
style: TextStyle(
color: Colors.white,
),
),
),
),
),
SizedBox(height: 24.0),
],
),
),
],
),
);
}
}```

Answer 1

Assuming you are decoding the json as shown above, you need to use something like:
void parseJson() async {
var decode = json.decode(theJson);
var types = decode[0]['prop_type']; // List<dynamic>
_propTypes = List<String>.from(types); // List<String>
...
setState((){});
}
(Prefer camelCase for variable names.)
List.from is a handy way to change the type of a list. Remember that the whole structure of json where the right hand side of a value can be a bool, int, string, array, object means that the json decoder has to make things dynamic in Dart.
Now your map to create items should work.