毛玻璃效果相当于是给一个视图上添加一层蒙板。
代码如下:
1、main.dart
import 'package:flutter/material.dart';
import 'frosted_glass_demo.dart';
void main()=>runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primaryColor: Colors.blue,
),
home: Scaffold(
body: FrostdClassDemo(),
),
);
}
}
2、frosted_glass_demo.dart,需要注意的是需要添加dart:UI包,在使用的过程中需要用到它里面的属性。
import 'package:flutter/material.dart';
import 'dart:ui';
class FrostdClassDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
ConstrainedBox(//约束性盒子,添加额外的约束条件
constraints: const BoxConstraints.expand(),//约束条件,随着里面的内容扩展
child: Image.network('https://pics0.baidu.com/feed/aec379310a55b31926456e7b8bc60f20cefc17f2.png?token=8ae644bf971c6ec61b27b524dc235e81'),
),
//层级嵌套,在Center组件中创建一个可裁切的矩形,然后添加一个背景过滤器,在过滤器里面设置图片过滤和透明度,然后创建一个容器,设置容器大小在容器中添加文字
Center(
child: ClipRect(//可裁切的矩形
child: BackdropFilter( //背景过滤器
filter: ImageFilter.blur(sigmaX:5.0 ,sigmaY:5.0 ), //图片过滤器包含在dart:UI中
child: Opacity(
opacity: 0.5, //透明度,数值越大越不透明
child: Container(
width: 500.0,
height: 700.0,
decoration: BoxDecoration( //盒子修饰器
color: Colors.grey.shade200
),
child: Center(
child: Text(
'Hello',
style: Theme.of(context).textTheme.display3,
),
),
),
),
),
),
),
],
),
);
}
}
运行效果如下: