Flutter中关闭Dialog时如何传递TextField值至上一页面？

有两种常用的实现方式，直接上代码和说明：

方法1：通过Navigator.pop()返回数据 + async/await接收 #

这是Flutter官方推荐的方式，利用showDialog的Future特性，等待Dialog关闭后返回输入内容。

// 主页面按钮逻辑
ElevatedButton(
  onPressed: () async {
    // 弹出Dialog并等待返回值
    String? inputText = await showDialog<String>(
      context: context,
      builder: (_) => const InputDialog(),
    );

    // 拿到文本后做后续处理
    if (inputText != null) {
      print("用户输入：$inputText");
      // 比如赋值给页面变量、更新UI等
    }
  },
  child: const Text("弹出输入框"),
)

// 自定义输入Dialog
class InputDialog extends StatefulWidget {
  const InputDialog({super.key});

  @override
  State<InputDialog> createState() => _InputDialogState();
}

class _InputDialogState extends State<InputDialog> {
  final _controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      title: const Text("请输入文本"),
      content: TextField(
        controller: _controller,
        decoration: const InputDecoration(hintText: "输入内容"),
      ),
      actions: [
        TextButton(
          onPressed: () => Navigator.pop(context), // 取消返回null
          child: const Text("取消"),
        ),
        TextButton(
          onPressed: () {
            // 关闭Dialog并传递输入文本
            Navigator.pop(context, _controller.text.trim());
          },
          child: const Text("确认"),
        ),
      ],
    );
  }

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

说明：showDialog返回的是Future<T?>，所以用await可以直接获取Navigator.pop(context, data)中传递的data。点击取消时直接pop()不带参数，返回值为null，记得做非空判断。

方法2：使用回调函数传递文本 #

如果不想用异步逻辑，可以通过回调函数将输入文本传递回主页面。

// 主页面按钮逻辑
ElevatedButton(
  onPressed: () {
    showDialog(
      context: context,
      builder: (_) => InputDialog(
        onConfirm: (text) {
          // 拿到文本后的处理逻辑
          print("用户输入：$text");
          // 更新UI或业务处理
        },
      ),
    );
  },
  child: const Text("弹出输入框"),
)

// 带回调的自定义Dialog
class InputDialog extends StatefulWidget {
  final Function(String) onConfirm;

  const InputDialog({required this.onConfirm, super.key});

  @override
  State<InputDialog> createState() => _InputDialogState();
}

class _InputDialogState extends State<InputDialog> {
  final _controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      title: const Text("请输入文本"),
      content: TextField(
        controller: _controller,
        decoration: const InputDecoration(hintText: "输入内容"),
      ),
      actions: [
        TextButton(
          onPressed: () => Navigator.pop(context),
          child: const Text("取消"),
        ),
        TextButton(
          onPressed: () {
            final inputText = _controller.text.trim();
            widget.onConfirm(inputText); // 调用回调传递文本
            Navigator.pop(context);
          },
          child: const Text("确认"),
        ),
      ],
    );
  }

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

说明：这种方式适合需要在Dialog关闭前就执行某些逻辑的场景，或者项目中统一使用回调风格的代码结构。

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