Flutter Dart中如何创建类JS对象并访问statedata属性值

你在Dart中声明的statedata本质是Map<String, String>类型的键值对集合，不是JavaScript中支持点语法访问属性的普通对象。Dart作为强类型语言，对点语法的使用有明确边界：点语法仅用于访问类实例的成员属性/方法，原生不支持直接通过点语法读取Map的键值，这是两种语言的核心语法差异。

1. 原生支持的Map访问写法（最简便，适合临时数据场景） #

直接使用方括号传入键名取值即可，和JavaScript中对象的方括号访问逻辑一致：

void main() {
  var statedata = {
    "name":"sajib",
    "name2":"sajib saha",
  };
  // 正确取值写法
  print(statedata['name']);  // 输出：sajib
  print(statedata['name2']); // 输出：sajib saha
}

注意：方括号内的键名必须和Map定义时的键完全匹配，大小写不一致、拼写错误都会导致取值返回null。

2. 支持点语法访问的写法（生产环境推荐，类型安全） #

如果你想要和JavaScript一致的点访问体验，同时享受强类型的校验优势，建议定义对应的数据类：

// 定义对应的数据结构
class StateData {
  final String name;
  final String name2;

  // 构造函数
  const StateData({
    required this.name,
    required this.name2,
  });
}

void main() {
  // 实例化数据对象
  var statedata = StateData(name: "sajib", name2: "sajib saha");
  // 直接用点语法访问属性
  print(statedata.name);  // 输出：sajib
  print(statedata.name2); // 输出：sajib saha
}

这种写法在编译期就会检查属性名是否存在、类型是否匹配，不会出现因为拼写错误导致的运行时bug，是Flutter业务开发中的标准实践。

如果是需要频繁做JSON序列化的场景，也可以配合json_serializable等代码生成工具自动生成数据类的模板代码，减少手写重复代码的工作量。

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