抖动的模糊图像边缘不受影响（仅适用于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

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

这是在我的iPhone上：

如果您真的需要模糊处理才能在模拟器中正常工作，我建议您在this issue上添加+1或在上图所示的回购仓库中发布一个新问题（如我链接到的问题似乎他们看到的是不一致的地方，而不是您看到的确切地方，尽管我认为此修复程序也可以解决您看到的问题。

我认为有可能不需要为模拟器修复错误的解决方案。...从理论上讲，您可以使用溢出使模糊超出屏幕边缘的范围至少为模糊，然后使图像偏移与溢出相同的量，并在屏幕范围外翻转同一图像的副本，以使模糊的颜色正确。...但是，这似乎有点过分= D。

Answer 2

该修补程序将在Flutter SDK的稳定版本中立即可用，直到需要时，可以通过在终端中运行此命令切换到主渠道并重建应用程序：

flutter channel master

来源：Backdrop filter is inconsistent on software rendering

Answer 3

如果您将上述代码替换为

0x08010203

然后看起来像这样，边缘问题就解决了