Flutter+Riverpod下界面不更新、按钮无响应及光标异常问题

问题根源 #

原代码的核心错误是用StateProvider存储TextEditingController实例：

• TextEditingController是可变对象，直接修改其text属性不会触发StateProvider的状态更新，导致UI（如按钮可点击状态）无法同步。
• onChanged中手动赋值controller.state.text = value，会和TextFormField自身的controller同步逻辑冲突，引发光标异常。

解决方案1：本地管理TextEditingController（简单场景首选） #

直接在Widget内部创建Controller，通过监听文本变化触发UI更新：

class MyWidget extends ConsumerStatefulWidget {
  const MyWidget({super.key});

  @override
  ConsumerState<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends ConsumerState<MyWidget> {
  late final TextEditingController _controller;

  @override
  void initState() {
    super.initState();
    _controller = TextEditingController();
    // 监听文本变化，触发UI重建
    _controller.addListener(() {
      setState(() {});
    });
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Riverpod example")),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          children: [
            TextFormField(controller: _controller),
            ElevatedButton(
              onPressed: _controller.text.isNotEmpty
                  ? () => print('Button pressed with value: ${_controller.text}')
                  : null,
              child: const Text('Submit'),
            ),
          ],
        ),
      ),
    );
  }
}

解决方案2：用Riverpod管理文本状态（复杂场景） #

如果需要在多个Widget间共享输入文本，用StateProvider存储文本字符串而非Controller：

// 存储输入文本的StateProvider
final inputTextProvider = StateProvider<String>((ref) => "");

class MyWidget extends ConsumerWidget {
  const MyWidget({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final inputText = ref.watch(inputTextProvider);
    return Scaffold(
      appBar: AppBar(title: const Text("Riverpod example")),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          children: [
            TextFormField(
              initialValue: inputText,
              onChanged: (value) {
                // 更新Provider中的文本状态
                ref.read(inputTextProvider.notifier).state = value;
              },
            ),
            ElevatedButton(
              onPressed: inputText.isNotEmpty
                  ? () => print('Button pressed with value: $inputText')
                  : null,
              child: const Text('Submit'),
            ),
          ],
        ),
      ),
    );
  }
}

关键说明 #

• 避免将TextEditingController放入StateProvider：Controller是UI层的可变对象，适合在Widget生命周期内管理，而非作为全局状态存储。
• 用Riverpod管理数据状态（如文本字符串）而非UI控制器：这样状态更新能正确触发UI重建，避免同步冲突。

内容的提问来源于stack exchange，提问作者せいゆう