Flutter页面跳转后widget.data为空及NoSuchMethodError问题求助

1. 先校验widget.employee是否为空 #

你直接调用widget.employee.id.toString()，如果widget.employee是null，必然触发NoSuchMethodError。先加非空判断：

// 先检查employee实例是否存在
if (widget.employee == null) {
  print("Employee data is null");
  return; // 或做其他错误兜底处理
}
// 空安全版本用!强制解包（确认非空后）
String url = 'http://10.0.0.21:8000/api/users/' + widget.employee!.id.toString();

2. 修正FutureBuilder的使用逻辑 #

报错指向FutureBuilder构建异常，大概率是没正确处理异步快照的状态，或者future初始化方式错误：

• 不要在builder里直接创建future：每次组件重建都会重复发起请求，应该把future赋值给State类的成员变量，在initState里初始化：

late Future<Map<String, dynamic>> _employeeFuture;

@override
void initState() {
  super.initState();
  _employeeFuture = fetchEmployeeDetail();
}

• 完善快照状态判断：必须处理加载、错误、空数据的情况：

FutureBuilder(
  future: _employeeFuture,
  builder: (context, snapshot) {
    // 加载中状态
    if (snapshot.connectionState == ConnectionState.waiting) {
      return const CircularProgressIndicator();
    }
    // 错误状态
    if (snapshot.hasError) {
      return Text('请求出错: ${snapshot.error}');
    }
    // 空数据状态
    if (!snapshot.hasData || snapshot.data == null) {
      return const Text('无可用数据');
    }
    // 正常渲染数据
    return DetailWidget(data: snapshot.data!);
  },
)

3. 完善请求的错误处理 #

当前try-catch只捕获请求异常，没处理后端返回的错误状态码，补充状态码校验和JSON解析：

Future<Map<String, dynamic>> fetchEmployeeDetail() async {
  try {
    if (widget.employee == null) {
      throw Exception("未传入用户数据");
    }
    final url = 'http://10.0.0.21:8000/api/users/${widget.employee!.id}';
    final response = await http.get(Uri.parse(url));

    // 校验响应状态码
    if (response.statusCode != 200) {
      throw Exception('请求失败，状态码: ${response.statusCode}');
    }

    // 解析JSON数据
    return jsonDecode(response.body);
  } catch (e) {
    print('请求错误详情: ${e.toString()}');
    rethrow; // 把错误抛给FutureBuilder展示
  }
}

4. 检查网络配置与接口可用性 #

• Android项目需在AndroidManifest.xml中添加网络权限：

  <uses-permission android:name="android.permission.INTERNET" />
  

• iOS项目若使用HTTP接口，需在Info.plist中配置允许非HTTPS请求：

  <key>NSAppTransportSecurity</key>
  <dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
  </dict>
  

• 先用浏览器/Postman测试http://10.0.0.21:8000/api/users/[具体用户ID]，确认后端接口能正常返回JSON数据

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