Flutter点击注册按钮实现页面模糊弹窗时按钮不可点击的问题咨询

一、解决BackdropFilter遮挡按钮无法点击的问题 #

核心原因是BackdropFilter的透明容器会默认拦截下层组件的点击事件，哪怕它没有可见颜色。只需要给容器加上IgnorePointer包裹，让它不处理点击事件，就能让下层按钮正常响应。

修改后的makeblur组件代码：

class makeblur extends StatelessWidget {
  const makeblur({super.key, required this.a});

  final double a;

  @override
  Widget build(BuildContext context) {
    return Positioned.fill(
      child: BackdropFilter(
        filter: ImageFilter.blur(sigmaX: a, sigmaY: a),
        // 用IgnorePointer让容器不拦截点击
        child: IgnorePointer(
          child: Container(
            color: Colors.black.withOpacity(0.1), // 可选：加半透明黑增强模糊层次感
          ),
        ),
      ),
    );
  }
}

配合状态管理实现点击按钮触发模糊+弹窗的完整页面示例：

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

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  double _blurSigma = 0;

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Scaffold(
          appBar: AppBar(title: const Text('登录页')),
          body: Center(
            child: ButtonTheme(
              minWidth: 100.0,
              height: 50.0,
              child: ElevatedButton(
                onPressed: () {
                  setState(() => _blurSigma = 5);
                  // 显示注册弹窗，关闭后恢复模糊
                  showDialog(
                    context: context,
                    builder: (context) => AlertDialog(
                      title: const Text('注册'),
                      content: const Column(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          TextField(decoration: InputDecoration(hintText: '用户名')),
                          TextField(decoration: InputDecoration(hintText: '密码')),
                        ],
                      ),
                      actions: [
                        TextButton(
                          onPressed: () => Navigator.pop(context),
                          child: const Text('取消'),
                        ),
                        ElevatedButton(
                          onPressed: () => Navigator.pop(context),
                          child: const Text('注册'),
                        ),
                      ],
                    ),
                  ).then((_) => setState(() => _blurSigma = 0));
                },
                child: const Text('注册'),
              ),
            ),
          ),
        ),
        // 仅当模糊值大于0时显示模糊层
        if (_blurSigma > 0) makeblur(a: _blurSigma),
      ],
    );
  }
}

二、关于切换带模糊和不带模糊的Scaffold #

可以实现，但不推荐。切换整个Scaffold会触发页面完全重建，性能不如直接控制单个模糊层的显示状态高效。如果非要这么做，示例代码如下：

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

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  bool _showBlurVersion = false;

  // 普通登录页Scaffold
  Widget _buildNormalScaffold() {
    return Scaffold(
      appBar: AppBar(title: const Text('登录页')),
      body: Center(
        child: ElevatedButton(
          onPressed: () => setState(() => _showBlurVersion = true),
          child: const Text('注册'),
        ),
      ),
    );
  }

  // 带模糊效果的Scaffold
  Widget _buildBlurScaffold() {
    return Stack(
      children: [
        _buildNormalScaffold(),
        const makeblur(a: 5),
        // 这里可以添加弹窗组件
        Center(
          child: Card(
            child: Padding(
              padding: const EdgeInsets.all(16.0),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  const Text('注册表单'),
                  const SizedBox(height: 16),
                  ElevatedButton(
                    onPressed: () => setState(() => _showBlurVersion = false),
                    child: const Text('返回登录'),
                  ),
                ],
              ),
            ),
          ),
        ),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return _showBlurVersion ? _buildBlurScaffold() : _buildNormalScaffold();
  }
}

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