flutter背景过滤器

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,
),
),
),
),
),
),
)
],
),
);
}
}
posted @ 2020-01-23 20:51  braveheart007  阅读(344)  评论(0编辑  收藏  举报