Repository navigation
Surrounding color leaks into widgets when BackdropFilter with ImageFilter.blur is applied #99691
Description
I'm having an issue with a GridView of blurred tiles using BackdropFilter with ImageFilter.blur where any surrounding color leaks into them:
Here is a Dartpad example: https://dartpad.dev/?id=1196002918293fdd251557b037d2d786
Here is the code sample:
import 'dart:ui';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'ImageFilter Color Leak Issue',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
title: const Text('ImageFilter.blur Color Leak Issue'),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Expanded(
child: Container(
color: Colors.white,
width: double.infinity,
child: FittedBox(
fit: BoxFit.contain,
child: Padding(
padding: const EdgeInsets.all(40),
child: Container(
width: 400,
height: 400,
color: const Color(0xFF0000FF),
child: GridView.count(
padding: EdgeInsets.zero,
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
crossAxisCount: 3,
children: tiles(),
),
),
),
),
),
),
Expanded(
child: Container(
color: Colors.black,
width: double.infinity,
child: FittedBox(
fit: BoxFit.contain,
child: Padding(
padding: const EdgeInsets.all(40),
child: Container(
width: 400,
height: 400,
color: const Color(0xFF0000FF),
child: GridView.count(
padding: EdgeInsets.zero,
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
crossAxisCount: 3,
children: tiles(),
),
),
),
),
),
),
],
),
),
);
}
List<Widget> tiles() => List<Widget>.generate(
9,
(_) => ClipRRect(
child: BackdropFilter(
filter: ImageFilter.blur(
sigmaX: 20,
sigmaY: 20,
),
child: Container(
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.2),
borderRadius: BorderRadius.circular(12),
),
),
),
),
);
}flutter doctor:
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.10.3, on macOS 11.5.1 20G80 darwin-x64, locale en-US)
[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2020.3)
[✓] VS Code (version 1.66.0-insider)
[✓] Connected device (1 available)
! Device emulator-5562 is offline.
[✓] HTTP Host Availability
• No issues found!
Metadata
Metadata
Assignees
Labels
Important issues not at the top of the work listflutter/engine related. See also e: labels.Found to occur in 2.10Found to occur in 2.11flutter/packages/flutter repository. See also f: labels.The issue has been confirmed reproducible and is ready to work onmaterial_ui package in flutter/packagesIssue is closed as already fixed in a newer versionOwned by Design Languages teamTriaged by Design Languages team
Type
Projects
- Status
Activity
darshankawar commentedon Mar 8, 2022
@Ruzo
From the attached link, can you try the workarounds mentioned as below and see if it helps ?
As a suggestion for a workaround, you can try playing with the TileMode in the ImageFilter constructor to see if you can minimize the issue. I'm guessing "mirror" might help as that will reflect some of the other pixels near the edge into the "off-edge" samples that get used. Another option would be to play with the blend mode of the BackdropFilter. It is currently defaulted to "SrcOver" which blends the fading white at the edge of the blurred background with the implicit black of the background and results in the "fade to black" you see. Perhaps using "Src" instead might fill it with "faded white" instead of a blend of that over black and you might get white, but that depends on how it interprets storing a non-opaque color into a framebuffer that has no alpha.Ruzo commentedon Mar 8, 2022
@darshankawar Thanks for the reply. I've tried these workarounds (again) but nothing works. None of them made a difference.
darshankawar commentedon Mar 9, 2022
Thanks for the update. I do see the same behavior upon running the code sample using latest stable and master. Also, the workarounds mentioned in the related issue doesn't have any effect.
stable, master flutter doctor -v
zanderso commentedon Mar 14, 2022
@flar Is this working as documented? It makes sense that the fragment at the edge needs to sample from nearby fragments already in the framebuffer, right?
23 remaining items
knopp commentedon Nov 1, 2024
I think part of the issue is that tile mode in Flutter applies to edge of texture being sampled from as opposed other blur implementations where tile mode is applied to pixels sampled anywhere outside of blur area. It would probably help if the tile mode was applied to pixels sampled from outside of the blur clip instead.
dkwingsmt commentedon May 16, 2025
I think this is the same issue as #164267. I investigated the issue and found a matching algorithm, which I've recorded under #164267. I'm planning to work on it, although I have to finish what I have on hand now.
Edit, to provide more context: There are some structural obstacles for this problem. Simply put, the engine uses a shader that blurs the entire surface altogether (with some masks for performance), meaning that the shader only takes a sigma as the parameter, while this new algorithm at least needs another rectangle parameter (if we simplify the support to only rectangular areas instead of arbitrary masks). Since the current shader algorithm lacks information, merely switching between current TileMode values is not sufficient.
Also of course the shader will need an additional variable to track alpha.
Ruzo commentedon Jun 11, 2025
That's great to hear!
I'm thinking that Apple's new Liquid Glass will bring new focus on this issue.
dkwingsmt commentedon Jun 11, 2025
Definitely. Just for the record, yes the Liquid Glass should not invalidate it at all, since Liquid Glass also involves blurring.
BackdropFilterwithImageFilter.blursamples outside clip bounds, causing white halo on dark backgrounds #173530 as a duplicate of this issue[Engine] iOS style blurring (#175458)
github-actions commentedon Jan 19, 2026
This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of
flutter doctor -vand a minimal reproduction of the issue.