Flutter中如何匹配数组ID并从对象提取对应名称列表？

需求：根据电影数据中的genre_ids数组（如[16, 878, 28]），匹配类型API返回的类型对象中的id，最终返回对应的类型名称列表。以下是具体解决步骤：

步骤1：修正API调用的笔误 #

原getAllMovies方法存在参数错误，同时gettAllMovies是拼写错误，一并修正：

Future<List<Movies?>> getAllMovies() async {
  Response response = await Dio().get(Contants().moviesUrl);
  return (response.data['results'] as List).map((movies) {
    return Movies.fromJson(movies); // 修正参数为当前遍历的movies对象
  }).toList();
}

步骤2：编写类型ID匹配名称的工具方法 #

添加一个方法，根据电影的genreIds列表和所有类型数据，筛选出匹配的类型名称：

List<String?> getGenreNames(List<dynamic>? genreIds, List<Genres?>? allGenres) {
  if (genreIds == null || allGenres == null) return [];
  // 过滤出ID匹配的类型，提取名称
  return allGenres
      .where((genre) => genre != null && genreIds.contains(genre.id))
      .map((genre) => genre?.name)
      .toList();
}

步骤3：在FutureBuilder中应用匹配逻辑 #

修改FutureBuilder的构建逻辑，为每个电影生成对应的类型名称列表并传入组件：

FutureBuilder(
  future: Future.wait([
    RepositoryFromAPItoDB().getAllMovies(), // 修正拼写错误
    RepositoryFromAPItoDB().getAllGenres()
  ]),
  builder: (BuildContext context, AsyncSnapshot<List<dynamic>?> snapshot) {
    if (!snapshot.hasData) {
      return const Center(child: CircularProgressIndicator());
    }
    final List<Movies?> moviesList = snapshot.data?[0] as List<Movies?>;
    final List<Genres?> genresList = snapshot.data?[1] as List<Genres?>;
    
    return ListView.builder(
      itemCount: moviesList.length,
      itemBuilder: (BuildContext context, int index) {
        final movie = moviesList[index];
        // 获取当前电影对应的类型名称列表
        final genreNames = getGenreNames(movie?.genreIds, genresList);
        
        return MoviesListTile(
          title: movie?.title,
          voteAverage: movie?.voteAverage,
          description: movie?.overview,
          posterPath: movie?.posterPath,
          genreIds: movie?.genreIds,
          genres: genreNames, // 传入匹配后的名称列表
        );
      },
    );
  },
)

步骤4：优化类型名称展示Widget #

为展示组件添加间距，避免文字拥挤：

Widget getTextWidgets(List<String?> strings) {
  return Row(
    children: strings.map((item) {
      if (item == null) return const SizedBox.shrink();
      return Padding(
        padding: const EdgeInsets.only(right: 8.0),
        child: Text(item),
      );
    }).toList(),
  );
}

内容的提问来源于stack exchange，提问作者GrandMagus