flutter - 如何阻止模糊滤镜对模糊图像周围的颜色进行采样？

Question

我有一个演示小部件，如下所示：

class BlurDemo extends StatelessWidget {
  BlurDemo({Key key}) : super(key: key);

  final String imageUrl =
      'https://dogtime.com/assets/uploads/2018/10/puppies-cover-1280x720.jpg';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Blur Demo'),
      ),
      backgroundColor: Colors.black,
      body: Center(
        child: SizedBox(
          width: 250,
          height: 250,
          child: FittedBox(
            fit: BoxFit.cover,
            child: Stack(children: [
              Image.network(imageUrl),
              Positioned.fill(
                child: ClipRRect(
                    child: BackdropFilter(
                        filter: ImageFilter.blur(sigmaX: 20.0, sigmaY: 20.0),
                        child: Container(color: Colors.black.withAlpha(0))),
    ))])))));}}

当前效果：

所需效果（样机）：

如果您查看“当前效果”图像中照片的边缘，您会看到变暗效果。模糊过滤器对图像周围的像素进行采样，即使这些像素位于剪辑矩形之外。在这个演示中，图像被裁剪并且有更多的周围像素可以被采样以获得模糊效果。即使它没有被裁剪，最好将效果钳制到 cliprect 的内容中并且不让周围的颜色渗入。

标签： flutterdart

Answer 1

ethanblake4 能够在 GitHub 上回答这个问题：https ://github.com/flutter/flutter/issues/61891 。

答案是使用ImageFiltered而不是 BackdropFilter。