Flutter 模糊图像边缘不受影响（仅限 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 上：

如果您确实需要模糊才能在模拟器中正常工作，我建议您为此问题添加 +1或使用上图在 flutter repo 中创建一个新问题（如在我链接到的问题中，他们似乎看到了不一致）而不是您所观察到的确切内容，尽管我认为该修复程序也会修复您所看到的内容）。

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