Flutter的Fliter Widget 也是非常強大的,它可以製作出你想要的神奇濾鏡效果。這節我們就以實戰的方式,製作一個毛玻璃效果
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, //設置比較酷炫的字體
),
),
),
),
),
),
)
],
)
);
}
}