Flutter中Server API数据无法显示的问题求助

核心问题：你的API返回的是食谱列表数据，但代码错误地将其当作单个食谱对象处理，导致数据解析和展示的类型不匹配，最终无法在界面上显示内容。

1. 修正API调用类的getFood()方法 #

将返回类型改为Future<List<Food>>，正确解析列表格式的API响应：

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

import 'package:project/model/food.dart';

class FoodProvider extends ChangeNotifier {
  Future<List<Food>> getFood() async {
    var result = await http.get(
      Uri.parse('http://sweetreats.herokuapp.com/api/recipe'),
    );

    print(result.statusCode);

    if (result.statusCode == 200) {
      List data = json.decode(result.body);
      List<Food> foods = data.map((item) => Food.fromJson(item)).toList();
      return foods;
    } else {
      throw Exception('加载食谱失败');
    }
  }
}

2. 修正FutureBuilder的类型与数据处理 #

把FutureBuilder的泛型改为List<Food>，直接使用解析后的列表生成界面组件：

FutureBuilder<List<Food>>(
  future: foodProvider.getFood(),
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      final foods = snapshot.data!;
      return Column(
        children: foods.asMap().entries.map((entry) {
          final index = entry.key;
          final food = entry.value;
          return Container(
            margin: EdgeInsets.only(
              top: index == 0 ? 0 : 30,
            ),
            child: FoodItem(food: food),
          );
        }).toList(),
      );
    } else if (snapshot.hasError) {
      return Center(child: Text('加载失败: ${snapshot.error}'));
    }
    return Center(child: CircularProgressIndicator());
  },
),

额外调试提示 #

• 确认FoodItem组件能正确接收并渲染Food类型的数据
• 保留print(result.statusCode)的输出，方便确认API请求是否成功
• 避免在build方法中直接调用getFood()，可将请求放在initState中缓存，防止重复发起网络请求

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