Flutter Drawer背景模糊：如何在绘制时动态调整sigmaX与sigmaY？

现有Flutter代码片段：

drawer: Drawer(
    child: BackdropFilter(
        filter: ImageFilter.blur(sigmaX: dynamic, sigmaY: dynamic),
        child: Container()),
  ),

请问是否存在方法可以在Drawer绘制时动态修改sigmaX和sigmaY的值？

（动态模糊效果演示：）

当然可以实现，核心通过状态管理结合Drawer的动画进度来同步调整模糊参数，具体步骤如下：

• 用StatefulWidget管理模糊状态
  将包含Drawer的页面改为StatefulWidget，在状态类中定义模糊参数变量，比如：

  double _sigmaValue = 0.0;
  

• 监听Drawer的动画控制器
  Drawer的展开/收起对应一个内置动画控制器，通过ScaffoldState获取并监听其进度，映射为模糊值：

  late AnimationController _drawerAnimController;
  
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      _drawerAnimController = Scaffold.of(context).drawerController;
      _drawerAnimController.addListener(_updateBlur);
    });
  }
  
  void _updateBlur() {
    // 根据动画进度（0-1）设置模糊值范围，这里示例为0到10
    setState(() {
      _sigmaValue = _drawerAnimController.value * 10;
    });
  }
  
  @override
  void dispose() {
    _drawerAnimController.removeListener(_updateBlur);
    super.dispose();
  }
  

• 绑定参数到BackdropFilter
  把代码中的dynamic替换为状态变量：

  drawer: Drawer(
    child: BackdropFilter(
      filter: ImageFilter.blur(sigmaX: _sigmaValue, sigmaY: _sigmaValue),
      child: Container(color: Colors.white.withOpacity(0.2)),
    ),
  ),
  

• 性能优化（可选）
  用AnimatedBuilder替代setState，避免不必要的Widget重建：

  drawer: Drawer(
    child: AnimatedBuilder(
      animation: _drawerAnimController,
      builder: (context, child) {
        final sigma = _drawerAnimController.value * 10;
        return BackdropFilter(
          filter: ImageFilter.blur(sigmaX: sigma, sigmaY: sigma),
          child: child,
        );
      },
      child: Container(color: Colors.white.withOpacity(0.2)),
    ),
  ),
  

通过以上步骤，就能实现随Drawer展开/收起动态调整模糊程度的效果，和演示动画一致。

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