Flutter中使用RiverPod时TextField无法正常工作的问题

问题根源 #

• 全局TextController滥用：你把TextEditingController声明为全局变量，会导致跨页面/组件重建时状态混乱，还没法和RiverPod状态联动更新。
• Provider未同步输入变化：controllerprovider只在初始化时返回controller.text，用户输入时Provider不会自动更新，导致读取的是空值或旧内容。
• 缺少输入校验：直接用int.parse()转换输入，没处理空字符串或非数字的情况，触发FormatError: Invalid Number。

修复方案 #

1. 用Provider管理TextEditingController #

别用全局控制器，改用StateProvider托管，让控制器生命周期和Widget绑定。

2. 实时同步输入到Provider #

给TextField加onChanged回调，或者监听控制器的addListener，把输入内容实时同步到Provider。

3. 增加输入验证逻辑 #

转换为整数前先检查输入是否为空、是否是有效数字，避免解析报错。

修复后的完整代码 #

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

// 存储用户输入的数字状态
final userValueProvider = StateProvider<int>((ref) {
  return 0;
});

// 用Provider管理TextEditingController
final textControllerProvider = StateProvider<TextEditingController>((ref) {
  final controller = TextEditingController();
  // 监听文本变化，同步到输入内容Provider
  controller.addListener(() {
    ref.read(inputTextProvider.notifier).state = controller.text;
  });
  return controller;
});

// 存储输入的文本内容
final inputTextProvider = StateProvider<String>((ref) {
  return '';
});

class HomePage extends ConsumerWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final userValue = ref.watch(userValueProvider);
    final inputText = ref.watch(inputTextProvider);
    final textController = ref.watch(textControllerProvider);

    return Scaffold(
      appBar: AppBar(
        title: const Center(child: Text("Home")),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ElevatedButton(
            child: const Text("Go to the Counter page"),
            onPressed: () {
              Navigator.of(context).push(
                MaterialPageRoute(builder: ((context) => const CounterPage())),
              );
            },
          ),
          const SizedBox(height: 60),
          TextField(
            controller: textController,
            keyboardType: TextInputType.number, // 限制数字键盘输入
            decoration: InputDecoration(
              labelText: "Enter a number",
              border: const OutlineInputBorder(),
              prefixIcon: const Icon(Icons.numbers),
              suffixIcon: inputText.isEmpty
                  ? const SizedBox.shrink()
                  : IconButton(
                      icon: const Icon(Icons.close),
                      onPressed: () {
                        textController.clear();
                        ref.read(inputTextProvider.notifier).state = '';
                      },
                    ),
            ),
            // 也可以用onChanged替代controller的addListener
            // onChanged: (value) {
            //   ref.read(inputTextProvider.notifier).state = value;
            // },
          ),
          IconButton(
            onPressed: () {
              final currentValue = ref.read(userValueProvider.notifier).state;
              final input = ref.read(inputTextProvider);

              // 输入校验
              if (input.isEmpty) {
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(content: Text("请输入数字")),
                );
                return;
              }

              final parsedNumber = int.tryParse(input);
              if (parsedNumber == null) {
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(content: Text("请输入有效的数字")),
                );
                return;
              }

              // 更新状态
              ref.read(userValueProvider.notifier).state = parsedNumber;

              ScaffoldMessenger.of(context).showSnackBar(SnackBar(
                content: const Text("输入已保存"),
                action: SnackBarAction(
                  label: "撤销",
                  onPressed: () {
                    ref.read(userValueProvider.notifier).state = currentValue;
                  },
                ),
              ));
            },
            icon: const Icon(Icons.add_task),
          ),
        ],
      ),
    );
  }
}

// 占位的CounterPage组件
class CounterPage extends StatelessWidget {
  const CounterPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Counter")),
      body: const Center(child: Text("Counter Page")),
    );
  }
}

关键改进说明 #

• 控制器托管：通过textControllerProvider管理控制器，避免全局状态混乱，生命周期更可控。
• 输入同步：实时把输入内容同步到inputTextProvider，保证Provider状态和用户输入一致。
• 安全解析：用int.tryParse()替代int.parse()，解析失败时返回null，配合空值检查提前提示用户，避免崩溃。
• 清除逻辑优化：点击清除按钮时直接清空控制器并同步Provider状态，逻辑更直观。

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