Flutter：跳转至CreateID页面时自动弹出弹窗的实现问题求助

看起来你现在的问题主要出在弹窗组件的结构设计和页面初始化逻辑上，我来帮你一步步修正：

问题分析 #

1. 你的PopUp组件嵌套了Scaffold和FutureBuilder，这完全没必要——showDialog本身就是异步方法，不需要用FutureBuilder包裹，而且弹窗本身不需要独立的Scaffold。
2. CreateID是无状态组件，没有生命周期方法来触发弹窗，所以页面跳转后没法自动执行弹窗逻辑。

解决方案 #

我们需要调整两个组件的结构，让页面初始化时自动触发弹窗：

1. 重构CreateID为有状态组件，添加弹窗触发逻辑

把CreateID改成StatefulWidget，利用initState结合addPostFrameCallback在页面渲染完成后弹出弹窗：

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

  @override
  State<CreateID> createState() => _CreateIDState();
}

class _CreateIDState extends State<CreateID> {
  // 如果需要表单验证，这里定义Form的全局key
  final _formKey = GlobalKey<FormState>();

  @override
  void initState() {
    super.initState();
    // 等待页面build完成后再弹窗，避免上下文未就绪的问题
    WidgetsBinding.instance.addPostFrameCallback((_) {
      _showPopUp();
    });
  }

  void _showPopUp() {
    showDialog(
      context: context,
      barrierDismissible: false, // 可选：设置为false禁止点击外部关闭弹窗
      builder: (context) => PopUp(formKey: _formKey),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: cPrimaryColor,
      body: SafeArea(
        child: Column(
          children: [
            Expanded(child: Container(width: double.infinity)),
            Expanded(
              child: Container(
                width: double.infinity,
                decoration: const BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(20.0),
                    topRight: Radius.circular(20.0),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

2. 简化PopUp组件，仅返回弹窗内容

去掉多余的Scaffold和FutureBuilder，让PopUp直接返回AlertDialog：

class PopUp extends StatelessWidget {
  final GlobalKey<FormState> formKey;

  const PopUp({Key? key, required this.formKey}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      content: Stack(
        overflow: Overflow.visible,
        children: <Widget>[
          // 关闭按钮
          Positioned(
            right: -40.0,
            top: -40.0,
            child: InkResponse(
              onTap: () => Navigator.of(context).pop(),
              child: const CircleAvatar(
                child: Icon(Icons.close),
                backgroundColor: Colors.red,
              ),
            ),
          ),
          // 表单内容
          Form(
            key: formKey,
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                const Padding(
                  padding: EdgeInsets.all(8.0),
                  child: TextFormField(
                    decoration: InputDecoration(hintText: "输入内容1"),
                  ),
                ),
                const Padding(
                  padding: EdgeInsets.all(8.0),
                  child: TextFormField(
                    decoration: InputDecoration(hintText: "输入内容2"),
                  ),
                ),
                // 提交按钮
                Padding(
                  padding: const EdgeInsets.only(top: 16.0),
                  child: ElevatedButton(
                    onPressed: () {
                      if (formKey.currentState!.validate()) {
                        // 表单验证通过，处理提交逻辑
                        Navigator.of(context).pop();
                      }
                    },
                    child: const Text("提交"),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

关键说明 #

• 使用WidgetsBinding.instance.addPostFrameCallback：确保页面已经完成渲染，此时调用showDialog不会出现上下文错误。
• 表单验证支持：通过传递GlobalKey<FormState>，可以在弹窗里实现表单的验证逻辑，这是Flutter表单的标准用法。
• 弹窗关闭逻辑：点击右上角红色按钮或者提交按钮后，调用Navigator.of(context).pop()关闭弹窗。

现在你点击跳转按钮进入CreateID页面时，弹窗就会自动弹出来了！

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