微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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,
),
),
),
),
),
),
)
],
),
);
}
}

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐