Flutter-17-毛玻璃效果制作

Flutter的Fliter Widget 它可以制作出你想要的神奇滤镜效果。
main.dart文件编写：

import 'package:flutter/material.dart';
import 'frosted_glass_emo.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title:'Flutter Demo',
theme:ThemeData(
primarySwatch: Colors.blue,
),
home:Scaffold(
body:FrostedGlassDemo(),
)
);
}
BackdropFilter Widget

BackdropFilter就是背景滤镜组件，使用它可以给父元素增加滤镜效果，它里边最重要的一个属性是filter。 filter属性中要添加一个滤镜组件，实例中我们添加了图片滤镜组件，并给了模糊效果。

import 'package:flutter/material.dart';
import 'dart:ui'; //引入ui库，因为ImageFilter Widget在这个里边。

class FrostedGlassDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body:Stack( //重叠的Stack Widget，实现重贴
children: <Widget>[
ConstrainedBox( //约束盒子组件，添加额外的限制条件到 child上。
constraints: const BoxConstraints.expand(), //限制条件，可扩展的。
child:Image.network('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545738629147&di=22e12a65bbc6c4123ae5596e24dbc5d3&imgtype=0&src=http%3A%2F%2Fpic30.photophoto.cn%2F20140309%2F0034034413812339_b.jpg')
),
Center(
child: ClipRect( //裁切长方形
child: BackdropFilter( //背景滤镜器
filter: ImageFilter.blur(sigmaX: 5.0,sigmaY: 5.0), //图片模糊过滤，横向竖向都设置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(
'JSPang',
style: Theme.of(context).textTheme.display3, //设置比较酷炫的字体
),
),
),
),
),
),
)
],
)
);
}
}