抖动模糊图像边缘不受影响（仅 iOS）

Question

将ImageFilter.blur应用于图像时，图像的边缘没有变化。

如何将模糊扩展到边缘？

import 'dart:ui';
import 'package:flutter/material.dart';

class ExamplePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        image: DecorationImage(
          image: NetworkImage("https://i.pinimg.com/236x/93/ca/59/93ca599d74b60b4e9b30cd9472f842b7--patterns-in-nature-beautiful-patterns.jpg"),
          fit: BoxFit.cover,
        ),
      ),
      child: BackdropFilter(
        filter: ImageFilter.blur(sigmaX: 20, sigmaY: 20),
        child: Container(
          decoration: BoxDecoration(color: Colors.white.withOpacity(0.0)),
        ),
      ),
    );
  }
}

Answer 1

如果您将上述代码替换为

return Container(
  decoration: BoxDecoration(
    image: DecorationImage(
      image: CachedNetworkImageProvider("https://i.pinimg.com/236x/93/ca/59/93ca599d74b60b4e9b30cd9472f842b7--patterns-in-nature-beautiful-patterns.jpg"),
      fit: BoxFit.cover,
    ),
  ),
  child: BackdropFilter(
    filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
    child: Container(
      decoration: BoxDecoration(color: Colors.white.withOpacity(0.0)),
    ),
  ),
);

然后它看起来像这样并且边缘问题已解决

Answer 2

这可能不是您想听到的，也可能是=D。您看到的问题是 Skia 的软件渲染器存在模糊问题。除非您专门打开软件渲染，否则您不会在 Android 模拟器上看到相同的问题，也不会在使用硬件渲染的实际设备上看到同样的问题。

这是我的 iPhone:

如果您真的需要模糊才能在模拟器中正常工作，我建议您在 this issue 中添加一个 +1 或使用上图在 flutter repo 中创建一个新问题（如问题 I链接到它似乎他们看到了不一致，而不是你所观察到的，尽管我想这个修复也会修复你所看到的）。

我认为不需要为模拟器修复该错误的解决方案是可能的....理论上您可以使用溢出使模糊至少超出屏幕边缘模糊的大小，然后让图像偏移与溢出相同的量，并将同一图像的副本翻转到屏幕边界之外，以便模糊的着色是正确的....但这似乎有点矫枉过正= D.

Answer 3

Flutter SDK 稳定版很快就会修复，如果你需要它，在终端中通过运行切换到主频道并重建你的应用程序：

flutter channel master

来源：Backdrop filter is inconsistent on software rendering

抖动模糊图像边缘不受影响（仅 iOS）

Flutter blur image edges are unaffected (iOS only)

blur

flutter