Flutter中ImageFilter.blur模糊效果无法实现圆角问题求助

问题核心是你使用的ClipRRect没有指定borderRadius参数，导致它无法对内部的BackdropFilter进行圆角裁剪——子容器的borderRadius只是自身装饰，不会限制背景模糊的区域。

修改后的代码 #

Scaffold(
  body: Container(
    decoration: BoxDecoration(
      image: DecorationImage(
        image: AssetImage('assets/$bgImage'),
        fit: BoxFit.cover,
      ),
    ),
    child: Padding(
      padding: const EdgeInsets.fromLTRB(0, 200, 0, 0),
      child: Column(
        children: <Widget>[
          Center(
            // 关键：给ClipRRect添加和子容器一致的borderRadius
            child: ClipRRect(
              borderRadius: BorderRadius.circular(30),
              child: BackdropFilter(
                filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
                child: Container(
                  width: 300.0,
                  height: 120.0,
                  padding: EdgeInsets.all(10),
                  decoration: new BoxDecoration(
                    color: Colors.grey.shade200.withOpacity(0.2),
                    borderRadius: BorderRadius.circular(30),
                  ),
                  child: Column(
                    children: [
                      Text(
                        data!['time'],
                        style: TextStyle(
                          fontSize: 50,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      SizedBox(height: 10,),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          Text(
                            data!['location'],
                            style: TextStyle(
                              fontSize: 20,
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ),
          SizedBox(height: 30 ,),
          TextButton.icon(
            onPressed: () {
              Navigator.pushNamed(context, '/location');
            },
            icon: Icon(Icons.edit_location),
            label: Text('Edit Location'),
          ),
        ],
      ),
    ),
  ),
);

关键说明 #

• ClipRRect必须显式设置borderRadius，否则它只会按默认矩形裁剪，无法约束BackdropFilter的模糊范围
• BackdropFilter需要作为ClipRRect的直接子节点，这样裁剪规则才能直接作用在模糊效果上
• 子容器的borderRadius可以保留，用于自身背景色的圆角显示，和裁剪效果形成一致的视觉体验

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