Flutter blur image edges are unaffected (iOS only) - flutter

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

Answer 1

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.

Answer 2

The fix will be available soon in the stable version of Flutter SDK, until that if you need it, switch to the master channel by running this in terminal and rebuild your app:
flutter channel master
source: Backdrop filter is inconsistent on software rendering

Answer 3

If you replace you above mentioned code with
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)),
),
),
);
Then it look like this and edges issue resolved