我想在 Flutter 中的图像上应用 BackdropFilter。因此,我使用以下方法来应用Flutter docs中给出的过滤器。 .
import 'dart:ui';
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: MyApp(),
),
),
);
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Stack(
alignment: Alignment.bottomCenter,
children: <Widget>[
Container(
height: 500,
child: Image.network('https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQlXYdeEKhFq34sh8-0ZKC1uqCcVGgOzdW_ZRAqCBkWxG-oeCB1'),
),
Positioned(
top: 300,
bottom: 0,
left: 0,
right: 0,
child: ClipRect(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 2, sigmaY: 10),
child: Container(
color: Colors.black.withOpacity(0),
),
),
),
),
]
),
),
);
}
}
它产生了以下输出: Output of my code
我在 BackDropFilter 和图像之间发现了硬边。不过,我希望它们之间有平滑的边缘。
我怎样才能实现类似的目标 this ?
最佳答案
我能够实现它,但这是一种出路,因为目前还没有办法直接实现它。 使用此函数来创建效果。 此函数将收到您想要模糊的小部件列表。
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,
),
),
]),
),
),
);
}
}
关于image - 如何剪辑具有平滑边缘的 BackdropFilter?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58878011/