Flutter HTTP Get请求获取数据显示Null问题求助

我是Flutter和Dart的新手，在学习HTTP Get请求时遇到异常：点击按钮后界面显示Null而非目标数据。请求接口为https://reqres.in/api/users/2，以下是我的代码：

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as ziraHttp;
class getHttp extends StatefulWidget {
  const getHttp({super.key});
  @override
  State<getHttp> createState() => _getHttpState();
}
class _getHttpState extends State<getHttp> {
  late String id;
  late String email;
  late String name;
  @override
  void initState() {
    id = '';
    email = '';
    name = '';
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Get Tutorial"),
        centerTitle: true,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              "ID:$id ",
              style: TextStyle(fontSize: 20),
            ),
            Text(
              "email:$email ",
              style: TextStyle(fontSize: 20),
            ),
            Text(
              "Name:$name ",
              style: TextStyle(fontSize: 20),
            ),
            SizedBox(
              height: 12,
            ),
            ElevatedButton(
                onPressed: () async {
                  var serverResponse = await ziraHttp
                      .get(Uri.parse('https://reqres.in/api/users/2'));
                  if (serverResponse.statusCode == 200) {
                    Map<String, dynamic> dataResp =
                        json.decode(serverResponse.body);
                    setState(() {
                      id = dataResp["id"].toString();
                      email = dataResp["email"].toString();
                      name =
                          "${dataResp["first_name"]} ${dataResp["last_name"]}";
                    });
                  } else {
                    print("ERROR CODE: ${serverResponse.statusCode}");
                  }
                },
                child: Text("Get Data"))
          ],
        ),
      ),
    );
  }
}

核心问题 #

你调用的接口返回的JSON结构外层包含data字段，所有用户相关的id、email等数据都嵌套在data子对象里。直接从根级Map取值会找不到对应键，导致返回Null。接口返回的完整结构示例：

{
  "data": {
    "id": 2,
    "email": "janet.weaver@reqres.in",
    "first_name": "Janet",
    "last_name": "Weaver"
  }
}

修复后的代码 #

修改按钮点击事件中的数据解析逻辑，先取出data子Map，再从中获取对应字段：

ElevatedButton(
    onPressed: () async {
      var serverResponse = await ziraHttp
          .get(Uri.parse('https://reqres.in/api/users/2'));
      if (serverResponse.statusCode == 200) {
        Map<String, dynamic> dataResp =
            json.decode(serverResponse.body);
        // 先取出嵌套的data子对象
        Map<String, dynamic> userData = dataResp["data"];
        setState(() {
          id = userData["id"].toString();
          email = userData["email"].toString();
          name =
              "${userData["first_name"]} ${userData["last_name"]}";
        });
      } else {
        print("ERROR CODE: ${serverResponse.statusCode}");
      }
    },
    child: Text("Get Data"))

额外优化建议 #

• 给变量添加空安全处理，比如使用String?类型并设置默认值，避免Null异常；
• 取值时加入空判断，比如userData["id"]?.toString() ?? ""，防止字段缺失导致崩溃。

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