Flutter blur image edges are unaffected (iOS only)

Question

When applying ImageFilter.blur to an image, the edges of the image are unchanged.

How can I extend the blur to the edges?

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

Solution

This may not be what you want to hear, or it might be =D. The issue you're seeing is that Skia's software renderer has a problem with blurs. You won't see the same issue on the Android simulator unless you specifically turn on software rendering, nor on actual devices as they use hardware rendering.

This is on my iPhone:

If you really need blur to work properly in the simulator I'd recommend either adding a +1 to this issue or making a new issue in the flutter repo with the image above (as in the issue I linked to it seemed they were seeing inconsistency rather than exactly what you've observed, although I'd imagine the fix would fix what you're seeing as well).

A solution that wouldn't require that bug to be fixed for the simulator is possible I think.... You could theoretically use an overflow to make the blur go outside of the edge of the screen by at least the size of the blur, have the image then offset by the same amount as the overflow, and flip copies of the same image outside of the screen bounds so that the colouring on the blur is right.... but that seems a bit overkill =D.

Comments

[stevenspiel]

you're right. it looks much better. but the edges are still clearer than the center. And I need the blur to be more severe. It looks like you just lowered the sigmas from 20 to 5.

[Sunny]

I have checked on Android device with filter: ImageFilter.blur(sigmaX: 20, sigmaY: 20), and its working fine. Have you checked it on an iOS device?

[stevenspiel]

It seems to only be effecting iOS devices

[stevenspiel]

Ah, ok. Thank you! I had not tried it on an actual device, yet.