Края изображения размытого изображения не изменяются (только для 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 к этой проблеме , либо создать новую проблему в флаттереСделайте репо с изображением выше (поскольку в проблеме, с которой я столкнулся, казалось, что они видят несоответствие, а не то, что вы наблюдали, хотя я думаю, что исправление исправит и то, что вы видите).

Я думаю, что возможно решение, которое не требовало бы исправления этой ошибки для симулятора. Теоретически можно использовать переполнение, чтобы размытие выходило за пределы края экрана хотя бы на размерразмытие, затем смещение изображения на ту же величину, что и при переполнении, и переворачивание копий того же изображения за пределы экрана, чтобы обеспечить правильное окрашивание размытият .... но это кажется немного излишним = 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)),
    ),
  ),
);

Тогда это будет выглядеть так, и проблема с краями решена