Flutter解决List<dynamic>非Map<String,dynamic>子类型并展示name列表

问题根源 #

API返回的是JSON数组（列表），但当前代码尝试将其解析为单个Workouts_Model对象，导致类型不匹配。

修改步骤 #

1. 更新API调用代码

将fetchUserWorkout的返回类型改为Future<List<Workouts_Model>>，并使用模型中已有的列表解析方法处理返回数据：

static Future<List<Workouts_Model>> fetchUserWorkout() async {
  var url = Uri.parse(Config.apiURL + Config.userWorkoutsAPI);

  final response = await http.get(
    url,
    headers: {
      HttpHeaders.authorizationHeader:
          'Token XXXXXXXXXXXXXXX',
    },
  );

  final responseJson = jsonDecode(response.body);
  print(responseJson);

  if (response.statusCode == 200) {
    return workoutsModelFromJson(response.body);
  } else {
    throw Exception('Failed to load User');
  }
}

2. 更新HomeScreen中的Future类型

把页面内的futureWorkouts类型改为Future<List<Workouts_Model>>，匹配API方法的返回值：

class _HomeScreenState extends State<HomeScreen> {
  late Future<List<Workouts_Model>> futureWorkouts;

  @override
  void initState() {
    super.initState();
    futureWorkouts = APIService.fetchUserWorkout();
  }
  // 其他原有代码
}

3. 修改FutureBuilder展示列表

将FutureBuilder的泛型改为List<Workouts_Model>，并通过ListView渲染所有name字段：

FutureBuilder<List<Workouts_Model>>(
  future: futureWorkouts,
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      return ListView.builder(
        itemCount: snapshot.data!.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(snapshot.data![index].name ?? 'noname'),
          );
        },
      );
    } else if (snapshot.hasError) {
      print(snapshot.error);
      return Text('${snapshot.error}');
    }
    return const CircularProgressIndicator();
  },
),

4. 模型代码无需修改

你的模型代码已经包含了正确的列表解析方法workoutsModelFromJson，可以直接将JSON数组转换为List<Workouts_Model>，保持原样即可。

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