Flutter不使用ListView Builder、Future Builder从MySQL取数据存变量的方法

1 修正接口请求方法代码 #

你的原有请求方法里JSON解析步骤冗余，而且没有返回解析后的模型对象，修改后代码如下：

// 方法返回值指定为可空的LoginUserDataModel，方便处理请求失败的情况
Future<LoginUserDataModel?> loginWithMobile(String isoCode, String mobileNumber) async {
  var url = 'http://192.168.1.5/server/login.php';
  var data = {
    "phone_number": mobileNumber,
  };
  try {
    http.Response res = await http.post(Uri.parse(url), body: data);
    // 先判断请求状态是否正常
    if (res.statusCode == 200) {
      // 直接把返回的字符串转成Map类型，不需要先encode再decode
      Map<String, dynamic> resJson = json.decode(res.body);
      // 如果你的接口返回数据是嵌套在data字段里的（比如通用返回格式{code:xxx,msg:xxx,data:{用户数据}}），就把下面的resJson换成resJson['data']
      LoginUserDataModel userModel = LoginUserDataModel.fromJson(resJson);
      return userModel;
    }
    return null;
  } catch (e) {
    // 打印错误信息方便排查
    print("请求出错：$e");
    return null;
  }
}

2 调用方法获取字段存入变量 #

你可以在任意触发登录的位置（比如登录按钮点击事件）用async/await调用上述方法，拿到模型对象后直接取各个字段赋值给你需要的变量即可，示例如下：

// 定义你要存储的变量，比如存到State类里
String? userId;
String? userName;
String? userEmail;
String? userPhone;
String? userAddress;

// 登录按钮的点击触发方法
void onTapLogin() async {
  // 调用登录接口，传入你的参数
  LoginUserDataModel? user = await loginWithMobile("+86", "13xxxxxxxxx");
  if (user != null) {
    // 接口返回成功，把各个字段赋值给变量
    userId = user.id;
    userName = user.name;
    userEmail = user.email;
    userPhone = user.phoneNumber;
    userAddress = user.address;
    // 后续可以直接用这些变量做逻辑，比如跳转页面、存储到本地等
    print("登录成功，用户姓名：$userName");
  } else {
    print("登录失败");
  }
}

注意事项 #

• 如果接口返回的用户数据外层包裹了通用响应结构，一定要先提取用户数据的Map再传给fromJson方法，否则会解析失败
• 所有字段都做了非空校验，避免接口返回异常时出现空指针报错

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