Flutter ImageFilter 高斯模糊效果 BackdropFilter 实现过滤效果_flutte 高斯模糊 高性能写法

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

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

---

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

1 ImageFilter 高斯模糊效果

  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,
        ),
      ),
    );
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14

2 BackdropFilter 实现过滤效果

  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),
          ),
        ),
      ],
    );
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

3 BackdropFilter 使用实践 Demo

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

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(),
              ),
            ),
          ],
        ),
      ),
    );
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

  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,
        ),
      ),
    );
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

---

完毕

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

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

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