从 json 填充下拉菜单的颤振应用程序答案

【问题标题】：flutter application that populates a dropdown menu from json从 json 填充下拉菜单的颤振应用程序
【发布时间】：2021-06-08 04:59:24
【问题描述】：

我是 Flutter 的新手，我正在尝试从在线托管的 json 文件创建 3 个下拉菜单。这是 json 文件的示例。这是json file 的链接，这是模型类：

class DropdownModel {
    DropdownModel({
        this.sports,
        this.movies,
        this.tv,
    });

    List<Movie> sports;
    List<Movie> movies;
    List<Movie> tv;

    factory DropdownModel.fromJson(Map<String, dynamic> json) => DropdownModel(
        sports: List<Movie>.from(json["sports"].map((x) => Movie.fromJson(x))),
        movies: List<Movie>.from(json["movies"].map((x) => Movie.fromJson(x))),
        tv: List<Movie>.from(json["tv"].map((x) => Movie.fromJson(x))),
    );

    Map<String, dynamic> toJson() => {
        "sports": List<dynamic>.from(sports.map((x) => x.toJson())),
        "movies": List<dynamic>.from(movies.map((x) => x.toJson())),
        "tv": List<dynamic>.from(tv.map((x) => x.toJson())),
    };
}

class Movie {
    Movie({
        this.id,
        this.name,
    });

    int id;
    String name;

    factory Movie.fromJson(Map<String, dynamic> json) => Movie(
        id: json["id"],
        name: json["name"],
    );

    Map<String, dynamic> toJson() => {
        "id": id,
        "name": name,
    };
}

我该怎么做？

编辑

在四处寻找解决方案后，我遇到了这个solution ，它回答了我的问题

【问题讨论】：

标签： json flutter dart drop-down-menu

【解决方案1】：

一个例子是：

// Let's supose you have a variable of the DropdownModel
DropwdownModel model = DropdownModel(...);

// We store the current dropdown value
// Here you can put the default option
// Since you have Movies with id, I would recommend saving
// the movie value as the dropdownValue
String dropdownValue = '';

// For example, let's use the music
@override
Widget build(BuildContext context) {
  // We define the dropdown button
  return DropdownButton<String>(
    // The value is the selected value, you should control the state
    value: model.fromNameFromId(dropdownValue),
    // The icon to open the dropdown
    icon: Icon(Icons.arrow_downward),
    iconSize: 24,
    elevation: 16,
    // On changed is the method that it is called when a dropdown option
    // is selected
    onChanged: (String? newValue) {
      // Here we change the state, as I noted before
      // The newValue will be a movie id
      setState(() {
        dropdownValue = newValue!;
      });
    },
    items: model.movies.map<DropdownMenuItem<String>>(
      // We have to iterate through all the movies and return 
      // a list of DropdownMenuItems
      (Movie m) {
        return DropdownMenuItem<String>(
          value: m.id,
          // We display the movie name instead of the id
          child: Text(m.name),
        );
      })
      .toList(),
  );
}

如果您想要三个下拉菜单，则必须创建三个 DropdownButton！您可以在documentation中找到更多信息！

【讨论】：