flutter背景过滤器

Posted 2021-03-14 braveheart007

import ‘package:flutter/material.dart‘;
import ‘dart:ui‘;  //图片过滤器ImageFilter需要引入的包

class FrostedClassDemo extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(    //使用层叠组件，图片和毛玻璃、字体重叠在一起
        children: <Widget>[     //子元素数组
          //第一层在约束盒子里放一张网络照片
          ConstrainedBox(       //约束盒子组件，添加额外的约束条件在child上
            //约束条件
            constraints: const BoxConstraints.expand(),//随着约束条件进行扩展expand
            child: Image.network(‘https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3037664458,3316096873&fm=26&gp=0.jpg‘),
          ),
          //第二层添加毛玻璃
          Center(
            child: ClipRect(    //可裁切的矩形
              child: BackdropFilter(   //背景过滤器
                //引入图片过虑器（blur:模糊设置）
                filter: ImageFilter.blur(sigmaX: 5.0,sigmaY: 5.0),
                child: Opacity(   //设置透明度
                  opacity: 0.5,//半透明
                  child: Container(
                    width: 500.0,
                    height: 700.0,
                    decoration: BoxDecoration(color: Colors.grey.shade200),//盒子修饰器
                    child: Center(
                      child: Text(
                        ‘毛玻璃效果‘,
                        style: Theme.of(context).textTheme.display3,
                      ),
                    ),
                  ),
                ),
              ),
            ),
          )
        ],
      ),
    );
  }
}