flutter学习--毛玻璃制作效果_flutter 毛玻璃效果

Flutter的Fliter Widget 也是非常强大的，它可以制作出你想要的神奇滤镜效果。这节我们就以实战的方式，制作一个毛玻璃效果

BackdropFilter Widget

BackdropFilter就是背景滤镜组件，使用它可以给父元素增加滤镜效果，它里边最重要的一个属性是filter。 filter属性中要添加一个滤镜组件，实例中我们添加了图片滤镜组件，并给了模糊效果。

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://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545738629147&di=22e12a65bbc6c4123ae5596e24dbc5d3&imgtype=0&src=http%3A%2F
1
2
3
4
5
6
7
8
9
10
11