（Flutter十四）毛玻璃动画效果

毛玻璃效果相当于是给一个视图上添加一层蒙板。
代码如下：
1、main.dart

import 'package:flutter/material.dart';
import 'frosted_glass_demo.dart';

void main()=>runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primaryColor: Colors.blue,
      ),
      home: Scaffold(
        body: FrostdClassDemo(),
      ),
    );
  }
}

2、frosted_glass_demo.dart，需要注意的是需要添加dart:UI包，在使用的过程中需要用到它里面的属性。

import 'package:flutter/material.dart';
import 'dart:ui';

class FrostdClassDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          ConstrainedBox(//约束性盒子，添加额外的约束条件
            constraints: const BoxConstraints.expand(),//约束条件，随着里面的内容扩展
            child: Image.network('https://pics0.baidu.com/feed/aec379310a55b31926456e7b8bc60f20cefc17f2.png?token=8ae644bf971c6ec61b27b524dc235e81'),
          ),
          //层级嵌套，在Center组件中创建一个可裁切的矩形，然后添加一个背景过滤器，在过滤器里面设置图片过滤和透明度，然后创建一个容器，设置容器大小在容器中添加文字
          Center(
            child: ClipRect(//可裁切的矩形
              child: BackdropFilter( //背景过滤器
                filter: ImageFilter.blur(sigmaX:5.0 ,sigmaY:5.0 ), //图片过滤器包含在dart:UI中
                child: Opacity(
                  opacity: 0.5, //透明度,数值越大越不透明
                  child: Container(
                    width: 500.0,
                    height: 700.0,
                    decoration: BoxDecoration( //盒子修饰器
                        color: Colors.grey.shade200
                    ),
                    child: Center(
                      child: Text(
                        'Hello',
                        style: Theme.of(context).textTheme.display3,
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

运行效果如下：