颤动模糊图像边缘不受影响（仅限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，或者在上面的图像中使用flutter repo创建一个新问题（就像我链接到它的问题似乎他们看到的不一致而不是而不是你所观察到的，虽然我认为修复会解决你所看到的问题）。

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

Answer 2

如果你用上面的代码替换你

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)),
    ),
  ),
);

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