Flutter的Fliter Widget 也是非常强大的，它可以制作出你想要的神奇滤镜效果。这节我们就以实战的方式，制作一个毛玻璃效果，通过实例来学习Fitler 的用法。（制作效果如下图）

Screenshot_1583633517.png

main.dart文件编写

  1. import 'package:flutter/material.dart';
  2. import 'frosted_glass_demo.dart';
  3. void main() => runApp(MyApp());
  4. class MyApp extends StatelessWidget {
  5.   @override
  6.   Widget build(BuildContext context) {
  7.     return MaterialApp(
  8.       title:'Flutter Demo',
  9.       theme:ThemeData(
  10.         primarySwatch: Colors.blue,
  11.       ),
  12.       home:Scaffold(
  13.         body:FrostedGlassDemo(),
  14.       )
  15.     );
  16.   }
  17. }

BackdropFilter Widget

BackdropFilter就是背景滤镜组件，使用它可以给父元素增加滤镜效果，它里边最重要的一个属性是filter。 filter属性中要添加一个滤镜组件，实例中我们添加了图片滤镜组件，并给了模糊效果。
我们新建一个 frosted_glass_demo.dart 的文件，然后写入下面的代码，具体的解释已经写到了代码的注释中。

import 'package:flutter/material.dart';
import 'dart:ui';   //引入ui库，因为ImageFilter Widget在这个里边。
class FrostedGlassDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body:Stack(   //重叠的Stack Widget，实现重贴
        children: <Widget>[
          ConstrainedBox( //约束盒子组件，添加额外的限制条件到 child上。
            constraints: const BoxConstraints.expand(), //限制条件，可扩展的。
            child:Image.network('https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1583633261&di=988b155e021c7681c06f4ea4ae8ed718&src=http://n.sinaimg.cn/sinacn15/126/w690h1036/20180829/4441-hikcahf3625873.jpg')
          ),
          Center(
            child: ClipRect(  //裁切长方形
              child: BackdropFilter(   //背景滤镜器
                filter: ImageFilter.blur(sigmaX: 1.0,sigmaY: 1.0), //图片模糊过滤，横向竖向都设置5.0
                child: Opacity( //透明控件
                  opacity: 0.3,
                  child: Container(// 容器组件
                    width: 500.0,
                    height: 80.0,
                    decoration: BoxDecoration(color:Colors.grey.shade200), //盒子装饰器，进行装饰，设置颜色为灰色
                    child: Center(
                      child: Text(
                        '欧阳娜娜',
                        style: Theme.of(context).textTheme.display3, //设置比较酷炫的字体
                      ),
                    ),
                  ),
                ),
              ),
            ),
          )
        ],
      )
    );
  }
}

这个代码嵌套很多，所以一定要注意你的代码层次，容易出错的地方就是嵌套错误。这个效果尽量少用，因为我测试了一下，它对系统的消耗还是比较大的。