Flutter中使用TextEditingController调用AlertDialog无响应问题求助

你的代码中AlertDialog无法弹出的核心原因是：调用showDialog时使用的context没有关联到Navigator。

在原代码里，_MyAppState的build方法返回的是MaterialApp，而MaterialApp内部才会创建Navigator栈。你在ElevatedButton的onPressed中使用的context是MyApp组件的上下文，这个上下文位于MaterialApp的上层，无法访问到MaterialApp内部的Navigator，导致弹窗无法触发。

下面提供两种可行的修复方案：

方案一：拆分MaterialApp与页面组件 #

将MaterialApp移到main函数中，让MyApp作为MaterialApp的home，这样MyApp的上下文就能正确访问到Navigator：

void main() {
  runApp(const MaterialApp(
    debugShowCheckedModeBanner: false,
    home: MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final myController = TextEditingController();

  @override
  void dispose() {
    // 清理控制器
    myController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Employee List')),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: TextField(
              controller: myController,
              decoration: const InputDecoration(
                border: OutlineInputBorder(),
                hintText: 'Enter Employee Name',
              ),
            ),
          ),
          ElevatedButton(
            onPressed: () {
              showDialog(
                context: context,
                builder: (context) {
                  return AlertDialog(
                    content: Text(myController.text),
                  );
                },
              );
            },
            child: const Icon(Icons.text_fields),
          ),
        ],
      ),
    );
  }
}

方案二：使用Builder包裹按钮 #

通过Builder组件创建一个新的上下文，这个上下文关联到MaterialApp内部的Navigator，从而正常触发弹窗：

// 修改原代码中Column的children里的ElevatedButton部分
Builder(
  builder: (context) {
    return ElevatedButton(
      onPressed: () {
        showDialog(
          context: context,
          builder: (context) {
            return AlertDialog(
              content: Text(myController.text),
            );
          },
        );
      },
      child: const Icon(Icons.text_fields),
    );
  },
)

两种方案都能解决问题，方案一更符合Flutter的组件分层规范，推荐使用。

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