Flutter如何拉取单条对象数据存入模型并跨Dart页面调用

前置处理：修复非法JSON格式 #

你贴出的接口响应里can_void、def_servicechg、def_tax三个字段没有填写值，属于不符合JSON规范的格式，直接调用jsonDecode会抛出解析错误，解析前需要先做格式补全：

// 假设responseBody为HTTP请求拿到的原始响应字符串
String validJsonStr = responseBody.replaceAllMapped(
  RegExp(r':\s*,'),
  (match) => ': null,'
);
// 实际开发中注意补全响应截断缺失的闭合大括号，确保JSON结构完整
Map<String, dynamic> responseMap = jsonDecode(validJsonStr);

第一步：定义对应的数据模型类 #

按照空安全规范编写模型，添加类型兜底逻辑避免后端返回类型不匹配导致的崩溃：

class BranchConfig {
  final String? alamat1;
  final String? alamat2;
  final String? alamat3;
  final String? branchName;
  final bool? canVoid;
  final num? defaultServiceCharge;
  final num? defaultTax;
  final String? email;

  BranchConfig({
    this.alamat1,
    this.alamat2,
    this.alamat3,
    this.branchName,
    this.canVoid,
    this.defaultServiceCharge,
    this.defaultTax,
    this.email,
  });

  // 从JSON映射构造模型实例的工厂方法
  factory BranchConfig.fromJson(Map<String, dynamic> json) {
    return BranchConfig(
      alamat1: json['alamat1'] as String?,
      alamat2: json['alamat2'] as String?,
      alamat3: json['alamat3'] as String?,
      branchName: json['branch_name'] as String?,
      // 布尔值兜底：兼容后端返回0/1、字符串'true'/'false'的场景
      canVoid: switch (json['can_void']) {
        bool val => val,
        num val => val == 1,
        String val => val.toLowerCase() == 'true',
        _ => null
      },
      // 数值类型兜底：兼容后端返回字符串格式数字的场景
      defaultServiceCharge: num.tryParse(json['def_servicechg']?.toString() ?? ''),
      defaultTax: num.tryParse(json['def_tax']?.toString() ?? ''),
      email: json['email'] as String?,
    );
  }
}

第二步：实现跨页面可访问的存储 #

简单场景无需引入第三方依赖，用Dart单例实现全局存储即可；中大型项目需要页面联动刷新的话，可以替换为Provider、Riverpod等状态管理方案，模型类无需改动。

// 全局状态单例
class AppStore {
  static final AppStore _instance = AppStore._internal();
  factory AppStore() => _instance;
  AppStore._internal();

  // 存储解析后的分支配置模型
  BranchConfig? currentBranchConfig;
}

第三步：请求后存入、跨页面调用 #

存入逻辑（请求成功后执行） #

// 你的HTTP请求逻辑
final resp = await http.get(Uri.parse('你的接口请求地址'));
if (resp.statusCode == 200) {
  // 先修复非法JSON
  final validJson = resp.body.replaceAllMapped(RegExp(r':\s*,'), (m) => ': null,');
  final jsonMap = jsonDecode(validJson) as Map<String, dynamic>;
  // 转模型实例
  final config = BranchConfig.fromJson(jsonMap);
  // 存入全局存储
  AppStore().currentBranchConfig = config;
}

跨页面读取调用 #

任意页面的业务逻辑、build方法中都可以直接读取存储的模型数据：

@override
Widget build(BuildContext context) {
  // 读取全局存储的模型
  final branchConfig = AppStore().currentBranchConfig;
  return Column(
    children: [
      Text('分支名称：${branchConfig?.branchName ?? "未获取"}'),
      Text('联系邮箱：${branchConfig?.email ?? "未设置"}'),
    ],
  );
}

注意：如果存入模型前就有页面已经加载完成，直接修改全局单例的属性不会触发页面刷新，这类场景需要将存储对象换成可监听的状态管理类，数据更新时会自动通知依赖的页面刷新。

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