Griffin Fisch
Reputation: 107
how to Display Json Data in dropdownlist in flutter
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),
],
),
),
],
),
);
}
}```
Upvotes: 2
Views: 880
Answers (1)
Richard Heap
Reputation: 51692
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.
Upvotes: 2
Related Questions
- How to use API in Dropdown list in Flutter?
- Display API Json response as DropDown List Flutter
- Flutter populate dropdown from json
- Selected DropDown item is not Showing in flutter
- How to implement DropdownList with JSON data
- how to show the json data based on the dropdown selection in flutter?
- flutter json object to to list for dropdown menu
- How to Create DropdownButton with a list of JSON Data and I want it to populate my DropDownButton in Flutter
- Populate json api data in a dropdownbox in flutter
- How to display json Nested Array in DropDown in Flutter?