如何根据 Flutter 中的 DropdownMenuItem 选择值显示 REST API 数据？

Question

我正在尝试使用颤振 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 小部件中访问对象并显示每个对象的“名称”和“描述” " 值基于内部选定的 "id" 值 DropdownMenuItem 例如

如果选择值 == "321"

返回 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,
          };
    }