Flutter中如何将表单数据传递至文件写入函数？

问题根源分析 #

你遇到的表单数据始终为null的原因有两个：

1. Data类初始状态未正确赋值：Data.initial()工厂方法没有给temperature和humidity设置初始值，加上late修饰符导致初始状态就是null。
2. Riverpod状态更新方式错误：直接修改ref.read(formDataProvider).temperature的方式不会触发Riverpod的状态更新机制——StateNotifier（也就是你的FormData provider）需要通过更新state属性来通知监听者，直接修改对象属性无法让Riverpod感知到变化，按钮组件watch时拿到的始终是初始的null状态。

另外，Riverpod并非完全不适合存储表单状态，只是需要遵循其状态管理的规范，或者根据场景选择更合适的方案。

可行解决方案 #

方案一：规范使用Riverpod StateNotifier管理表单状态 #

适合表单字段较多、需要跨多个组件/页面共享表单状态的场景。

1. 修正Data类为不可变模型：

   class Data {
     final String? temperature;
     final String? humidity;
   
     Data({this.temperature, this.humidity});
   
     // 提供复制方法，用于生成新的状态对象
     Data copyWith({String? temperature, String? humidity}) {
       return Data(
         temperature: temperature ?? this.temperature,
         humidity: humidity ?? this.humidity,
       );
     }
   
     // 正确初始化初始状态
     factory Data.initial() {
       return Data(temperature: null, humidity: null);
     }
   }
   

2. 更新FormData Provider，添加状态更新方法：

   @riverpod
   class FormData extends _$FormData {
     @override
     Data build() {
       return Data.initial();
     }
   
     // 提供更新温度的方法
     void updateTemperature(String? value) {
       state = state.copyWith(temperature: value);
     }
   
     // 提供更新湿度的方法
     void updateHumidity(String? value) {
       state = state.copyWith(humidity: value);
     }
   }
   

3. TextField中调用更新方法：

   TextField(
     onChanged: (text) {
       ref.read(formDataProvider.notifier).updateTemperature(text);
     },
     decoration: const InputDecoration(labelText: 'Temperature'),
   )
   

4. 按钮组件中正常调用writeFile：
   原代码无需修改，此时ref.watch(formDataProvider)会拿到最新的表单状态。

方案二：共享TextEditingController（推荐单页本地场景） #

如果表单和按钮仅在同一个页面内，直接共享TextEditingController是最直接的本地状态管理方式，无需依赖全局状态管理。

1. 在父组件中初始化Controller：

   class HomePage extends StatelessWidget {
     final temperatureController = TextEditingController();
     final humidityController = TextEditingController();
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         body: Column(
           children: [
             // 传递Controller给表单组件
             FormSection(
               tempController: temperatureController,
               humController: humidityController,
             ),
             // 按钮组件中直接获取Controller的值
             Consumer(
               builder: (context, ref, child) {
                 final serData = ref.watch(serDataProvider);
                 return ElevatedButton(
                   onPressed: serData.isNotEmpty
                       ? () {
                           writeFile(
                             Data(
                               temperature: temperatureController.text,
                               humidity: humidityController.text,
                             ),
                             serData,
                           );
                         }
                       : null,
                   child: const Text('写入文件'),
                 );
               },
             ),
           ],
         ),
       );
     }
   }
   

2. 表单组件接收并使用Controller：

   class FormSection extends StatelessWidget {
     final TextEditingController tempController;
     final TextEditingController humController;
   
     const FormSection({
       super.key,
       required this.tempController,
       required this.humController,
     });
   
     @override
     Widget build(BuildContext context) {
       return Column(
         children: [
           TextField(
             controller: tempController,
             decoration: const InputDecoration(labelText: '温度'),
           ),
           TextField(
             controller: humController,
             decoration: const InputDecoration(labelText: '湿度'),
           ),
         ],
       );
     }
   }
   

方案三：使用Riverpod StateProvider（简单表单场景） #

如果表单字段较少，用单个StateProvider管理每个字段会更轻便。

1. 定义单个字段的Provider：

   final temperatureProvider = StateProvider<String?>((ref) => null);
   final humidityProvider = StateProvider<String?>((ref) => null);
   

2. TextField中更新状态：

   TextField(
     onChanged: (text) {
       ref.read(temperatureProvider.notifier).state = text;
     },
     decoration: const InputDecoration(labelText: 'Temperature'),
   )
   

3. 按钮组件中获取字段值：

   onPressed: () {
     final serData = ref.watch(serDataProvider);
     if (serData.isNotEmpty) {
       final temp = ref.watch(temperatureProvider);
       final hum = ref.watch(humidityProvider);
       writeFile(Data(temperature: temp, humidity: hum), serData);
     }
   },
   

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