[英]How to show REST API data based on DropdownMenuItem selected value in flutter?
我正在尝试使用 flutter DropdownMenuItem小部件根据其所选 id 的值显示下面列表中仅一个对象的数据
从 REST API 收到的列表如下所示:
[ {
"id" : "123",
"name" : "firstItem",
"description" : "firstDescription",
}, {
"id" : "321",
"name" : "secondItem",
"description" : "secondDescription",
} ]
我用来处理响应的代码如下所示:
Future<List<ObjectName>>? getData() async {
const String url = 'urlOfAPI';
var response = await http.get(
Uri.parse(url),
headers: {
"content-type": "application/json",
"accept": "application/json",
},
);
if (response.statusCode == 200) {
final parsed = json.decode(response.body).cast<Map<String, dynamic>>();
return parsed.map<ObjectName>((json) => ObjectName.fromJson(json)).toList();
} else {
throw Exception('Failed to load');
}
}
我想知道如何从 flutter DropdownButton小部件内部访问对象,并根据DropdownMenuItem 中选定的“id”值显示每个对象的“名称”和“描述”值,例如
如果选择的值 == "321"
返回 secondItem & secondDescription
这是检查onChange
选定值的示例
import 'package:flutter/material.dart';
import 'dart:convert';
import 'package:http/http.dart' as http;
final jsonString =
'[{"id":"123","name":"firstItem","description":"firstDescription"},{"id":"321","name":"secondItem","description":"secondDescription"}]';
void main() {
runApp(MyApp());
}
//Create it as Global key
final myListKey = GlobalKey<AnimatedListState>();
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({
Key? key,
}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
List<User> users = [];
User? selected;
@override
void initState() {
super.initState();
fetchAndShow();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Center(
child: DropdownButton<User>(
value: selected,
onChanged: (User? newValue) {
// here you'll get selected value
setState(() {
selected = newValue!;
});
},
items: users
.map(
(e) => DropdownMenuItem(
child: Text(e.name),
value: e,
),
)
.toList(),
),
),
);
}
Future<List<User>>? getData() async {
//API call here and return users
return userFromJson(jsonString);
}
Future<void> fetchAndShow() async {
final users = await getData();
setState(() {
this.users = users ?? [];
});
}
}
List<User> userFromJson(String str) =>
List<User>.from(json.decode(str).map((x) => User.fromJson(x)));
String userToJson(List<User> data) =>
json.encode(List<dynamic>.from(data.map((x) => x.toJson())));
class User {
User({
required this.id,
required this.name,
required this.description,
});
String id;
String name;
String description;
factory User.fromJson(Map<String, dynamic> json) => User(
id: json["id"],
name: json["name"],
description: json["description"],
);
Map<String, dynamic> toJson() => {
"id": id,
"name": name,
"description": description,
};
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.