Flutter中如何基于ID从API检索数据并实现屏幕展示？

先明确API返回结构 #

首先确认你的API返回的data结构大概是这样的：

{
  "data": {
    "1": { "id": 1, "course_name": "高等数学", ... },
    "2": { "id": 2, "course_name": "编程基础", ... },
    ...
  }
}

这种以数字字符串为键的对象，直接用普通列表逻辑处理肯定行不通，得先转成可检索的结构。

1. 解析数据时转换结构 #

发起HTTP请求后，先把data字段转成Map<String, dynamic>，之后可以按需转成List或者直接用Map按ID检索：

import 'dart:convert';
import 'package:http/http.dart' as http;

Future<Map<String, dynamic>> fetchCoursePackages() async {
  final response = await http.get(Uri.parse('你的接口地址/auth/mhs_siakad/perwalian/get_paket'));
  
  if (response.statusCode == 200) {
    final jsonResponse = json.decode(response.body);
    // 把data字段转为Map<String, dynamic>，键是数字字符串（比如"1"）
    return jsonResponse['data'] as Map<String, dynamic>;
  } else {
    throw Exception('请求失败: ${response.statusCode}');
  }
}

2. 按ID检索指定条目 #

因为API的键就是ID的字符串形式，直接用Map的[]操作符就能获取：

// 假设已经获取到了coursePackagesMap
Map<String, dynamic> coursePackagesMap = await fetchCoursePackages();

// 检索ID为1的条目
var targetCourse = coursePackagesMap['1'];
if (targetCourse != null) {
  // 这里拿到了ID为1的完整数据
  print(targetCourse['course_name']);
} else {
  print('没有找到ID为1的课程包');
}

3. 按索引检索指定条目 #

如果需要按索引（比如第1个、第2个）获取，先把Map的values转成List：

List<dynamic> courseList = coursePackagesMap.values.toList();

// 检索索引为0的条目（第一个）
var firstCourse = courseList[0];
// 检索索引为1的条目（第二个）
var secondCourse = courseList[1];

4. 展示到屏幕上的示例 #

用FutureBuilder来展示指定ID的条目：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text('课程包详情')),
    body: FutureBuilder<Map<String, dynamic>>(
      future: fetchCoursePackages(),
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          var targetCourse = snapshot.data!['1'];
          if (targetCourse != null) {
            return Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text('课程ID: ${targetCourse['id']}'),
                  Text('课程名称: ${targetCourse['course_name']}'),
                  // 其他字段按需展示
                ],
              ),
            );
          } else {
            return Center(child: Text('未找到ID为1的课程包'));
          }
        } else if (snapshot.hasError) {
          return Center(child: Text('${snapshot.error}'));
        }
        // 加载中
        return Center(child: CircularProgressIndicator());
      },
    ),
  );
}

排查调用问题的要点 #

• 确认API返回结构：用Postman或者浏览器直接调用接口，查看data字段里是否真的存在ID为1的条目，避免是API本身没返回对应数据。
• 检查解析逻辑：打印coursePackagesMap的内容，确认转成Map后键值对是否正确，有没有遗漏数据。
• 处理空值情况：如果检索的ID不存在，要做空值判断，避免出现空指针异常。
• 检查请求权限/参数：确认请求头、参数是否正确，有些接口需要携带token或者其他参数才会返回完整数据。

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