我能够实现它,但这是一种出路,因为目前还没有办法直接实现它。
使用此函数来创建效果。此函数将接收您想要模糊的小部件列表。
List<Widget> buildBlurredImage(List<Widget> l) {
List<Widget> list = [];
list.addAll(l);
double sigmaX = 0;
double sigmaY = 0.1;
for (int i = 100; i < 350; i += 5) {
// 100 is the starting height of blur
// 350 is the ending height of blur
list.add(Positioned(
top: i.toDouble(),
bottom: 0,
left: 0,
right: 0,
child: ClipRect(
child: BackdropFilter(
filter: ImageFilter.blur(
sigmaX: sigmaX,
sigmaY: sigmaY,
),
child: Container(
color: Colors.black.withOpacity(0),
),
),
),
));
sigmaX += 0.1;
sigmaY += 0.1;
}
return list;
}
然后在堆栈内的小部件类中使用这样的函数
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Stack(
alignment: Alignment.bottomCenter,
// children: <Widget>[],
children: buildBlurredImage([
Container(
height: 500,
child: Image.network(
'https://www.thewowstyle.com/wp-content/uploads/2015/02/Beautiful-Wallpapers-14.jpg',
fit: BoxFit.cover,
),
),
]),
),
),
);
}
您的最终 Widget 类将如下所示
class MyApp extends StatelessWidget {
List<Widget> buildBlurredImage(List<Widget> l) {
List<Widget> list = [];
list.addAll(l);
double sigmaX = 0;
double sigmaY = 0.1;
for (int i = 100; i < 350; i += 5) {
// 100 is the starting height of blur
// 350 is the ending height of blur
list.add(Positioned(
top: i.toDouble(),
bottom: 0,
left: 0,
right: 0,
child: ClipRect(
child: BackdropFilter(
filter: ImageFilter.blur(
sigmaX: sigmaX,
sigmaY: sigmaY,
),
child: Container(
color: Colors.black.withOpacity(0),
),
),
),
));
sigmaX += 0.1;
sigmaY += 0.1;
}
return list;
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Stack(
alignment: Alignment.bottomCenter,
// children: <Widget>[],
children: buildBlurredImage([
Container(
height: 500,
child: Image.network(
'https://www.thewowstyle.com/wp-content/uploads/2015/02/Beautiful-Wallpapers-14.jpg',
fit: BoxFit.cover,
),
),
]),
),
),
);
}
}