用Flutter实现毛玻璃效果的代码如下:
import 'dart:ui';
import 'package:flutter/material.dart';
class FrostedGlassDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
ConstrainedBox(
constraints: BoxConstraints.expand(),
child: Image.network('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhuafans.dbankcloud.com%2Fpic%2F2017%2F01%2F25%2F195116eebdd5aa2fdaebff832280a391_IMG_20170125_153017.jpg%3Fmode%3Ddownload&refer=http%3A%2F%2Fhuafans.dbankcloud.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1620875132&t=ea50802522897aad43419379eea3267a'),
),
Center(
child: ClipRect(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 3.0,sigmaY: 3.0),
child: Opacity(
opacity: 0.5,
child: Container(
width: 500.0,
height: 800.0,
decoration: BoxDecoration(
color: Colors.grey.shade200
),
child: Center(
child:Text(
'Cat',
style: Theme.of(context).textTheme.display3
)
),
),
),
),
),
)
],
),
);
}
}
其中,要点为:
1.用Stack组件包含图片和毛玻璃两个组件。
2.图片组件外层加了约束盒子组件,从而增加约束,实现全屏扩展图片。
3.使用剪切矩形组件包含毛玻璃组件,并居中。
4.使用背景过滤器和透明组件实现毛玻璃的具体效果。
5.在容器组件中设置毛玻璃的宽高,并使用盒子装饰器组件修饰容器,设置颜色,也可以不使用盒子装饰器直接设置颜色。
如:
child: Container(
width: 500.0,
height: 800.0,
color: Colors.grey.shade200,
child: Center(
child:Text(
'Cat',
style: Theme.of(context).textTheme.display3
)
),
),
6.文字组件应居中,否则会在页面的左上角。
7.使用
Theme.of(context).textTheme.display3
设置字体的样式,也可以使用TextStyle组件进行设置。
毛玻璃效果如下: