Flutter ImageFilter 高斯模糊效果 BackdropFilter 实现过滤效果

落日映苍穹つ 2023-10-07 16:04 26阅读 0赞

> 在码农的世界里，优美的应用体验，来源于程序员对细节的处理以及自我要求的境界，年轻人也是忙忙碌碌的码农中一员，每天、每周，都会留下一些脚印，就是这些创作的内容，有一种执着，就是不知为什么，如果你迷茫，不妨来瞅瞅码农的轨迹。

*  [优美的音乐节奏带你浏览这个效果的编码过程][Link 1]
 *  [坚持每一天，是每个有理想青年的追求][Link 2]
 *  [追寻年轻人的脚步，也许你的答案就在这里][Link 3]
 *  [如果你迷茫 不妨来瞅瞅这里][Link 4]

--------------------

##### 1 ImageFilter 高斯模糊效果 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psMTg2MDM1NDM1NzI_size_16_color_FFFFFF_t_70_pic_center]

Widget buildWidget() {
        
        return Container(
          width: 100,
          //只对其子Widget 起作用
          child: ImageFiltered(
            imageFilter: ImageFilter.blur(sigmaX: 0, sigmaY: 0),
            child: Image.asset(
              "assets/images/sp02.png",
              fit: BoxFit.fitWidth,
              width: 100,
            ),
          ),
        );
      }

##### 2 BackdropFilter 实现过滤效果 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psMTg2MDM1NDM1NzI_size_16_color_FFFFFF_t_70_pic_center 1]

Widget buildImageFiltered() {
        
        return Stack(
          alignment: Alignment.center,
          children: [
            Text(
              "早起的年轻人",
              style: TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.bold,
              ),
            ),
            //会对下层所有的子组件起过滤效果
            BackdropFilter(
              filter: ImageFilter.blur(sigmaX: 2, sigmaY: 0),
              child: Container(
                color: Colors.white.withAlpha(0),
              ),
            ),
          ],
        );
      }

##### 3 BackdropFilter 使用实践 Demo #####

可以结合使用 Clip 系列的组件来限制 BackdropFilter 的模糊范围

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psMTg2MDM1NDM1NzI_size_16_color_FFFFFF_t_70_pic_center 2]

class _DemoPhysicalModelState extends State<DemoPhysicalModel> {
        
      @override
      Widget build(BuildContext context) {
        
        return Scaffold(
          appBar: AppBar(
            title: Text("ImageFilter"),
          ),
          backgroundColor: Colors.white,
          //来显示一张图片
          body: Container(
            //填充
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height,
            //来个层叠布局
            child: Stack(
              alignment: Alignment.center,
              children: [
                //第一层 来一个背景
                Positioned.fill(
                  child: Image.asset(
                    "assets/images/sp01.png",
                    //图片填充一下
                    fit: BoxFit.fill,
                  ),
                ),
                //第二层居中显示一个昵称
                // BackdropFilter 对底层的所有的Widget者起作用
                //当我们只想作用于中间这小块时
                //可以裁剪一下
                ClipRect(
                  child: BackdropFilter(
                    //高斯模糊度设置
                    filter: ImageFilter.blur(sigmaX: 10, sigmaY: 0),
                    child: buildChildBox(),
                  ),
                ),
              ],
            ),
          ),
        );
      }

Container buildChildBox() {
        
        return Container(
          width: 240,
          height: 180,
          //color 与 decoration 是互斥的
          //color: Colors.white,
          //来个圆角
          decoration: BoxDecoration(
            //颜色来个透明度
            color: Colors.white.withOpacity(0.2),
            //四个圆角
            borderRadius: BorderRadius.all(
              Radius.circular(10),
            ),
          ),
          //居中一下
          alignment: Alignment.center,
          child: Text(
            "早起的年轻人",
            style: TextStyle(
              fontSize: 20,
              fontWeight: FontWeight.bold,
            ),
          ),
        );
      }

--------------------

完毕

不局限于思维，不局限语言限制，才是编程的最高境界。

以小编的性格，肯定是要录制一套视频的，随后会上传

有兴趣 你可以关注一下 [西瓜视频 — 早起的年轻人][Link 5]

![在这里插入图片描述][20201031094959816.gif_pic_center]

[Link 1]: https://www.bilibili.com/video/BV11A411H7jE/
[Link 2]: https://www.zhihu.com/zvideo/1333855239163195392
[Link 3]: https://www.ixigua.com/6918314775210361351
[Link 4]: https://biglead.blog.csdn.net/article/details/93532582
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psMTg2MDM1NDM1NzI_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20210330140155944.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psMTg2MDM1NDM1NzI=,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psMTg2MDM1NDM1NzI_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20210330140354918.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psMTg2MDM1NDM1NzI=,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psMTg2MDM1NDM1NzI_size_16_color_FFFFFF_t_70_pic_center 2]: https://img-blog.csdnimg.cn/20210330140908715.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psMTg2MDM1NDM1NzI=,size_16,color_FFFFFF,t_70#pic_center
[Link 5]: https://www.toutiao.com/c/user/token/MS4wLjABAAAAYMrKikomuQJ4d-cPaeBqtAK2cQY697Pv9xIyyDhtwIM/
[20201031094959816.gif_pic_center]: https://img-blog.csdnimg.cn/20201031094959816.gif#pic_center