前言:Flutter的Fliter Widget 也是非常强大的,它可以制作出你想要的神奇滤镜效果。这里我们就以实战的方式,制作一个毛玻璃效果,通过实例来学习Fitler 的用法。
效果如下:这位老师你认识吗?
实现过程:
一、main.dart文件编写
import 'package:flutter/material.dart';
import 'Frosted_class.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: '毛玻璃效果',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new FrostedClassDemo(),
);
}
}
二、BackdropFilter Widget
BackdropFilter
就是背景滤镜组件,使用它可以给父元素增加滤镜效果,它里边最重要的一个属性是filter
。 filter
属性中要添加一个滤镜组件,实例中我们添加了图片滤镜组件,并给了模糊效果。
新建一个Frosted_class.dart
的文件,然后写入下面的代码,具体的解释已经写到了代码的注释中。
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('http://img.wpxap.com/data/attachment/forum/201203/11/0021593jdvh2zpdd3s3dlv.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,
),
),
),
),
),
),
)
],
),
);
}
}