如何显示基于DropdownMenuItem在扑动选择值的REST API数据?

Question

我试图根据其选定id的值显示来自下面列表的仅一个对象的数据，使用flutterDropdownMenuItem小部件

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

我想知道如何访问对象从内部扑动DropdownButton小部件和显示每个对象的"名称"one_answers";description"基于所选"id"的值。值内DropdownMenuItem。

如果选定值== "321">

return secondItem &secondDescription

Answer 1

下面是检查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,
};
}