如何在Flutter列表中使用JSON数据列表创建DropdownButton [英] How to Create DropdownButton with a list of JSON data within a list in flutter
问题描述
Using the example in How to Create DropdownButton with a list of JSON Data and I want it to populate my DropDownButton in Flutter I have created the following working example:
main.dart
main.dart
import 'package:flutter/material.dart';
import 'dart:convert';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
MyApp({Key key}) : super(key: key);
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
final String jsonData =
'[{"id":"e20c","name":"Apples","type":"fruit"},{"id":"a24e","name":"Oranges","type":"fruit"},{"id":"f2a0","name":"Bananas","type":"fruit"}]';
List<FruitResponse> _fruitResponse = [];
String selectedName;
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
final json = JsonDecoder().convert(jsonData);
_fruitResponse = (json)
.map<FruitResponse>((item) => FruitResponse.fromJson(item))
.toList();
return MaterialApp(
title: 'Pick Fruit',
home: Scaffold(
appBar: AppBar(
title: Text("Pick Fruit"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
DropdownButtonHideUnderline(
child: DropdownButton<String>(
hint: Text("Select Fruit"),
value: selectedName,
isDense: true,
onChanged: (String newValue) {
setState(() {
selectedName = newValue;
});
print(selectedName);
},
items: _fruitResponse.map((FruitResponse map) {
return DropdownMenuItem<String>(
value: map.nameDescription,
child: Text(map.nameDescription),
);
}).toList(),
)),
],
),
),
));
}
}
class FruitResponse {
final String nameid;
final String nameDescription;
FruitResponse({this.nameid, this.nameDescription});
factory FruitResponse.fromJson(Map<String, dynamic> json) {
return new FruitResponse(nameid: json['id'], nameDescription: json['name']);
}
}
但是，我的JSON数据将是
However, my JSON data will be
{"objects":[{"id":"e20c","name":"Apples","type":"fruit"},{"id":"a24e","name":"Oranges","type":"fruit"},{"id":"f2a0","name":"Bananas","type":"fruit"}],"from":1,"to":3,"total":3}
我已经使用 https://app.quicktype.io/生成以下内容
I have used https://app.quicktype.io/ to generate the following
FruitResponse fruitResponseFromJson(String str) => FruitResponse.fromJson(json.decode(str));
String fruitResponseToJson(FruitResponse data) => json.encode(data.toJson());
class FruitResponse {
List<Object> objects;
int from;
int to;
int total;
FruitResponse({
this.objects,
this.from,
this.to,
this.total,
});
factory FruitResponse.fromJson(Map<String, dynamic> json) => FruitResponse(
objects: List<Object>.from(json["objects"].map((x) => Object.fromJson(x))),
from: json["from"],
to: json["to"],
total: json["total"],
);
Map<String, dynamic> toJson() => {
"objects": List<dynamic>.from(objects.map((x) => x.toJson())),
"from": from,
"to": to,
"total": total,
};
}
class Object {
String id;
String name;
String type;
Object({
this.id,
this.name,
this.type,
});
factory Object.fromJson(Map<String, dynamic> json) => Object(
id: json["id"],
name: json["name"],
type: json["type"],
);
Map<String, dynamic> toJson() => {
"id": id,
"name": name,
"type": type,
};
}
当我用更新后的类FruitResponse替换类FruitResponse并对项目映射进行更改时，出现错误.
When I replace the class FruitResponse with the updated class FruitResponse and make changes to the items map I get an error.
类'_InternalLinkedHashMap'没有匹配的实例方法'map'
Class '_InternalLinkedHashMap' has no instance method 'map' with matching
此处是DartPad中的工作示例 https://dartpad.dev/b54d896aa35c159cd1749d5c67db7d52
Working example in DartPad here https://dartpad.dev/b54d896aa35c159cd1749d5c67db7d52
此处DartPad中的非工作示例 https://dartpad.dev/0413fb4bb7944ccd378b9eabf4e88ff3
Non-working example in DartPad here https://dartpad.dev/0413fb4bb7944ccd378b9eabf4e88ff3
我认为问题只是从json数据正确获取 List< Object> 名称，并在DropDownButton项目值中使用它.我知道 map.objects.toString()是不正确的，但是我不知道该放在哪里，或者我是否缺少_fruitResponse.
I think the problem is just getting the List<Object> names correctly from the json data and using it in the DropDownButton items value. I know that map.objects.toString() is not correct, but I don't know what to put there or if I am missing something with _fruitResponse.
在此先感谢您的帮助.我正在努力理解映射JSON响应列表数据.
Thanks in advance for any help. I'm struggling with understanding mapping JSON response list data.
推荐答案
只需检查一下我使用json创建的以下示例，我已经在本地解析了json:
Just Check out the following example i have created using the json, i have parsed the json locally :
以下是json:
{
"objects": [
{
"id": "e20c",
"name": "Apples",
"type": "fruit"
},
{
"id": "a24e",
"name": "Oranges",
"type": "fruit"
},
{
"id": "f2a0",
"name": "Bananas",
"type": "fruit"
}
],
"from": 1,
"to": 3,
"total": 3
}
根据json，我创建了模型类:
Depending on the json i have created the model class :
// To parse this JSON data, do
//
// final fruitResponse = fruitResponseFromJson(jsonString);
import 'dart:convert';
FruitResponse fruitResponseFromJson(String str) => FruitResponse.fromJson(json.decode(str));
String fruitResponseToJson(FruitResponse data) => json.encode(data.toJson());
class FruitResponse {
List<Object> objects;
int from;
int to;
int total;
FruitResponse({
this.objects,
this.from,
this.to,
this.total,
});
factory FruitResponse.fromJson(Map<String, dynamic> json) => FruitResponse(
objects: List<Object>.from(json["objects"].map((x) => Object.fromJson(x))),
from: json["from"],
to: json["to"],
total: json["total"],
);
Map<String, dynamic> toJson() => {
"objects": List<dynamic>.from(objects.map((x) => x.toJson())),
"from": from,
"to": to,
"total": total,
};
}
class Object {
String id;
String name;
String type;
Object({
this.id,
this.name,
this.type,
});
factory Object.fromJson(Map<String, dynamic> json) => Object(
id: json["id"],
name: json["name"],
type: json["type"],
);
Map<String, dynamic> toJson() => {
"id": id,
"name": name,
"type": type,
};
}
后来是我定义下拉列表的主类:
And later the main class where the i have defined the dropdown :
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'dummy.dart';
main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_UploadImageState createState() => _UploadImageState();
}
class _UploadImageState extends State<MyApp> {
bool _isLoading = false;
List<Object> objectList = List();
Future<String> loadFromAssets() async {
return await rootBundle.loadString('json/parse.json');
}
@override
void initState() {
// TODO: implement initState
super.initState();
loadYourData();
}
loadYourData() async {
setState(() {
_isLoading = true;
});
String jsonString = await loadFromAssets();
final fruitResponse = fruitResponseFromJson(jsonString);
objectList = fruitResponse.objects;
setState(() {
_isLoading = true;
});
}
@override
Widget build(BuildContext context) {
String selectedFruit;
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: Container(
child: Padding(
padding: const EdgeInsets.all(30.0),
child: Container(
height: 50,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5.0),
border: Border.all(
color: Colors.red, style: BorderStyle.solid, width: 0.80),
),
child: DropdownButton(
value: selectedFruit,
isExpanded: true,
icon: Padding(
padding: const EdgeInsets.only(left: 15.0),
child: Icon(Icons.arrow_drop_down),
),
iconSize: 25,
underline: SizedBox(),
onChanged: (newValue) {
setState(() {
print(newValue);
selectedFruit = newValue;
});
print(selectedFruit);
},
hint: Padding(
padding: const EdgeInsets.all(8.0),
child: Text('Select'),
),
items: objectList.map((data) {
return DropdownMenuItem(
value: data.id.toString(),
child: Padding(
padding: const EdgeInsets.only(left: 10.0),
child: Text(
data.name,
style: TextStyle(
fontSize: 18,
color: Colors.black,
),
),
),
);
}).toList()),
),
),
),
),
),
);
}
}
这篇关于如何在Flutter列表中使用JSON数据列表创建DropdownButton的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
