Flutter如何获取TextFormField输入文本并保存为JSON格式

1. 引入内置JSON处理依赖 #

在当前文件头部引入Dart官方自带的编解码库，无需安装第三方包即可完成JSON转换：

import 'dart:convert';

2. 补全输入框与控制器的绑定 #

你目前仅完成了手机号（nohap）输入框的控制器绑定，需要将姓名（name）、身高（tinggi）对应输入框也绑定到你提前定义好的控制器上，参考代码如下：

// 姓名输入框
TextFormField(
  controller: name,
  keyboardType: TextInputType.text,
  autofocus: false,
  decoration: InputDecoration(
    hintText: 'Nama Lengkap',
    contentPadding: EdgeInsets.all(16.0),
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(32.0)
    ),
  ),
),
// 身高输入框
TextFormField(
  controller: tinggi,
  keyboardType: TextInputType.number,
  autofocus: false,
  decoration: InputDecoration(
    hintText: 'Tinggi Badan (cm)',
    contentPadding: EdgeInsets.all(16.0),
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(32.0)
    ),
  ),
),

3. 编写JSON转换核心逻辑 #

在触发保存的动作回调中（比如保存按钮的点击事件），先读取控制器内的输入内容，组装为Map结构后通过jsonEncode方法转换为标准JSON字符串，建议增加基础非空校验避免生成无效数据：

void saveDataToJson() {
  // 基础非空校验
  if (name.text.trim().isEmpty || nohap.text.trim().isEmpty || tinggi.text.trim().isEmpty) {
    // 可替换为你自己的提示逻辑，比如弹出SnackBar提醒用户补全信息
    print("请填写完整所有字段");
    return;
  }

  // 组装结构化数据，身高字段转为数值类型更符合JSON规范
  Map<String, dynamic> formData = {
    "name": name.text.trim(),
    "phone_number": nohap.text.trim(),
    "height": double.tryParse(tinggi.text.trim()) ?? 0,
    "submit_time": DateTime.now().millisecondsSinceEpoch // 可选，增加提交时间戳方便后续排序处理
  };

  // 生成标准JSON字符串
  String jsonResult = jsonEncode(formData);
  
  // 此处即可拿到最终JSON结果，可根据业务需求调用接口上传、写入本地存储
  print("生成的JSON内容：$jsonResult");
  /* 输出示例：
  {"name":"Budi","phone_number":"08123456789","height":172.0,"submit_time":1718245612000}
  */
}

4. 绑定触发入口 #

在页面中新增保存按钮，点击时调用上述封装好的转换方法即可：

ElevatedButton(
  onPressed: saveDataToJson,
  child: Text("Simpan ke JSON"),
  style: ElevatedButton.styleFrom(
    padding: EdgeInsets.symmetric(horizontal: 32, vertical: 16),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(32)
    )
  ),
)

注意事项 #

• 页面销毁时必须调用三个控制器的dispose()方法释放资源，避免内存泄漏：

@override
void dispose() {
  name.dispose();
  nohap.dispose();
  tinggi.dispose();
  super.dispose();
}

• 如果需要将JSON持久化存储到本地，可以搭配本地存储库使用，生成的jsonResult字符串可以直接写入文件或者以字符串格式存入本地配置项。

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