Flutter TextField输入内容点击按钮后显示在Text的最优实现方案

方案对比与最优实现建议 #

你提到的两种实现都存在可优化的空间，并不推荐直接使用，以下是具体分析和符合Flutter最佳实践的实现方案。

现有方案缺陷分析 #

• 第一种实现的问题：
  1. 全局声明的TextEditingController没有dispose释放逻辑，会造成内存泄漏，多页面复用场景下还会出现状态冲突。
  2. 点击按钮触发setState时，按钮和Text组件所属的整棵子树都会重建，虽然const修饰的按钮会被Flutter复用Element，实际性能损耗极低，但不符合最小刷新的设计原则。
• 第二种实现的问题：
  1. 用GlobalKey跨组件直接调用内部状态方法属于强耦合实现，后续修改_NameWidget内部逻辑时很容易牵连上层调用代码，可维护性差。
  2. 在StatelessWidget的build方法中创建TextEditingController，没有对应的dispose时机，同样存在内存泄漏问题。
  3. GlobalKey本身的性能损耗可以忽略，但这种实现违背了Flutter单向数据流的设计理念，不推荐在这种简单场景下使用。

最佳实践实现方案 #

推荐使用ValueNotifier + ValueListenableBuilder的组合实现，既可以做到仅Text组件单独刷新，又能规避内存泄漏、耦合度高的问题，示例代码如下：

import 'package:flutter/material.dart';

void main() => runApp(const App());

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Flutter App')),
        body: const AppBody(),
      ),
    );
  }
}

class AppBody extends StatefulWidget {
  const AppBody({super.key});

  @override
  State<AppBody> createState() => _AppBodyState();
}

class _AppBodyState extends State<AppBody> {
  final TextEditingController _nameController = TextEditingController();
  final ValueNotifier<String> _showName = ValueNotifier('');

  @override
  void dispose() {
    // 释放资源，避免内存泄漏
    _nameController.dispose();
    _showName.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            width: 200,
            margin: const EdgeInsets.symmetric(vertical: 10),
            child: TextField(
              controller: _nameController,
              style: const TextStyle(fontSize: 20),
              decoration: const InputDecoration(
                labelText: 'Your name',
                labelStyle: TextStyle(fontSize: 20),
              ),
            ),
          ),
          Container(
            margin: const EdgeInsets.symmetric(vertical: 10),
            child: ElevatedButton(
              child: const Text('OK'),
              onPressed: () => _showName.value = _nameController.text,
            ),
          ),
          Container(
            margin: const EdgeInsets.symmetric(vertical: 10),
            // 只有该部分会跟随_showName的值变化重建
            child: ValueListenableBuilder<String>(
              valueListenable: _showName,
              builder: (context, value, child) {
                return Text(value, style: const TextStyle(fontSize: 20));
              },
            ),
          ),
        ],
      ),
    );
  }
}

这个方案的优势：

1. 所有控制器和状态都在State生命周期内管理，dispose时自动释放，无内存泄漏风险。
2. 点击按钮时仅更新_showName的值，只会触发ValueListenableBuilder包裹的Text组件重建，输入框、按钮都不会产生不必要的重建，刷新范围最小。
3. 没有全局变量、没有GlobalKey，代码耦合度低，符合Flutter单向数据流的设计规范。

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