Flutter中如何在屏幕中央以模态方式打开表单面板（非showModalBottomSheet）

当然可行，以下是两种常用的实现方案，都能满足你“在屏幕中央打开可承载完整表单的模态窗口”的需求：

方案一：基于showDialog自定义对话框 #

showDialog默认弹出的对话框是居中的，我们可以通过自定义Dialog的child内容，来承载完整表单，完全摆脱默认AlertDialog的样式限制：

showDialog(
  context: context,
  builder: (BuildContext context) {
    return Dialog(
      // 自定义模态窗口的边距
      insetPadding: EdgeInsets.symmetric(horizontal: 16),
      child: Container(
        padding: EdgeInsets.all(20),
        child: SingleChildScrollView(
          // 确保表单过长时可以滚动，避免键盘弹出溢出
          child: Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // 表单标题
              Text('提交表单', style: TextStyle(fontSize: 20, fontWeight: FontWeight.w600)),
              SizedBox(height: 24),
              // 表单字段
              TextFormField(
                decoration: InputDecoration(
                  labelText: '姓名',
                  border: OutlineInputBorder(),
                ),
              ),
              SizedBox(height: 16),
              TextFormField(
                decoration: InputDecoration(
                  labelText: '邮箱',
                  border: OutlineInputBorder(),
                ),
                keyboardType: TextInputType.emailAddress,
              ),
              SizedBox(height: 16),
              TextFormField(
                decoration: InputDecoration(
                  labelText: '备注',
                  border: OutlineInputBorder(),
                ),
                maxLines: 3,
              ),
              SizedBox(height: 24),
              // 操作按钮
              Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  TextButton(
                    onPressed: () => Navigator.pop(context),
                    child: Text('取消'),
                  ),
                  SizedBox(width: 8),
                  ElevatedButton(
                    onPressed: () {
                      // 执行表单提交逻辑
                      Navigator.pop(context);
                    },
                    child: Text('提交'),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  },
);

方案二：自定义模态层（Stack+AnimatedContainer） #

如果需要更灵活的动画效果或布局控制，可以用Stack叠加层实现自定义模态窗口：

bool _showModal = false;

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text('自定义模态示例')),
    body: Stack(
      children: [
        // 主页面内容
        Center(
          child: ElevatedButton(
            onPressed: () => setState(() => _showModal = true),
            child: Text('打开中央表单'),
          ),
        ),
        // 模态背景层+窗口
        if (_showModal)
          GestureDetector(
            // 点击背景关闭模态
            onTap: () => setState(() => _showModal = false),
            child: Container(
              color: Colors.black.withOpacity(0.5),
              alignment: Alignment.center,
              child: GestureDetector(
                // 阻止表单区域点击透传
                onTap: () {},
                child: AnimatedContainer(
                  duration: Duration(milliseconds: 300),
                  width: MediaQuery.of(context).size.width * 0.9,
                  height: MediaQuery.of(context).size.height * 0.7,
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(16),
                  ),
                  padding: EdgeInsets.all(20),
                  child: SingleChildScrollView(
                    child: Column(
                      children: [
                        // 你的表单内容，可自由扩展
                        Text('完整信息表单', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
                        SizedBox(height: 20),
                        TextFormField(decoration: InputDecoration(labelText: '手机号')),
                        SizedBox(height: 12),
                        TextFormField(decoration: InputDecoration(labelText: '地址')),
                        // ...可添加更多表单字段
                        SizedBox(height: 24),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.end,
                          children: [
                            TextButton(
                              onPressed: () => setState(() => _showModal = false),
                              child: Text('取消'),
                            ),
                            SizedBox(width: 8),
                            ElevatedButton(
                              onPressed: () {
                                // 执行表单提交逻辑
                                setState(() => _showModal = false);
                              },
                              child: Text('确认提交'),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            ),
          ),
      ],
    ),
  );
}

两种方案都可以完美承载复杂表单，且都是居中显示，和showModalBottomSheet的底部弹出逻辑完全不同，也不是系统默认的AlertDialog（你可以完全自定义样式和布局）。

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