如何用光滑的边缘裁剪BackdropFilter？
如何用光滑的边缘裁剪BackdropFilter？
提问于 2019-11-15 13:25:55
我想把BackdropFilter应用在一个颤振的图像上。因此，我使用了以下方法应用颤振文档中给出的过滤器。
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),
),
),
),
),
]
),
),
);
}
}它产生了以下输出：我的代码输出
我在BackDropFilter和图像之间得到了一个硬的边缘。不过，我想在他们中间有个平滑的边缘。
我怎样才能实现像这这样的东西
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-01-08 11:00:12
我能够实现它，但它是一种出路，因为目前还没有办法直接实现它。创建此函数以创建效果。此函数将收到一个小部件列表，您希望模糊.。
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,
),
),
]),
),
),
);
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58878011
复制相关文章
相似问题
腾讯云开发者
