huycozy
commented
2 weeks ago Hi @Andrekarma, could you share the source image? I checked this issue using my asset image but couldn't see the difference across platforms (Web, macOS, Android)
Open Andrekarma opened 2 weeks ago
huycozy
commented
2 weeks ago Hi @Andrekarma, could you share the source image? I checked this issue using my asset image but couldn't see the difference across platforms (Web, macOS, Android)
Andrekarma
commented
2 weeks ago i dont think the problem its about the image because it does the same with different pictures and also videos
The image has the BoxFit.cover set
Also try to use an image that has no white background, but a colored one, so the effect will be more visible
I can replicate it with this code:
return Stack(key: UniqueKey(), fit: StackFit.expand, children: <Widget>[
Container(
clipBehavior: Clip.hardEdge,
decoration: const BoxDecoration(),
child: ImageFiltered(
imageFilter: ImageFilter.blur(
sigmaX: 25.0,
sigmaY: 25.0,
),
child: Image.network(
"https://www.mindinventory.com/blog/wp-content/uploads/2022/10/flutter-3.png",fit: BoxFit.cover,)),
),
]);Looks like it's a CORS issue with the server hosting the image, so I downloaded it, use it as an asset image and can see the issue now:
| Web | macOS app |
|---|---|
Steps to reproduce
Use a ImageFilter.blur on a widget that is fullscreen
Container( clipBehavior: Clip.hardEdge, decoration: const BoxDecoration(), child: ImageFiltered( imageFilter: ImageFilter.blur( sigmaX: 25.0, sigmaY: 25.0, ), child: image ), ),
Expected results
This is correct on windows and android
Actual results
This is on the web
Code sample
Code sample
```dart [Paste your code here] ```Screenshots or Video
Screenshots / Video demonstration
Logs
Logs
```console [Paste your logs here] ```Flutter Doctor output
Doctor output
[√] Flutter (Channel stable, 3.19.2, on Microsoft Windows [Versione 10.0.22621.1105], locale it-IT) • Flutter version 3.19.2 on channel stable at C:\flutter_3.16 • Upstream repository https://github.com/flutter/flutter.git • Framework revision 7482962148 (8 weeks ago), 2024-02-27 16:51:22 -0500 • Engine revision 04817c99c9 • Dart version 3.3.0 • DevTools version 2.31.1 [√] Windows Version (Installed version of Windows is version 10 or higher) [√] Android toolchain - develop for Android devices (Android SDK version 33.0.0) • Android SDK at C:\Users\andreacarmagnola\AppData\Local\Android\sdk • Platform android-34, build-tools 33.0.0 • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java • Java version OpenJDK Runtime Environment (build 11.0.11+9-b60-7590822) • All Android licenses accepted. [√] Chrome - develop for the web • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe [√] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.8.0) • Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Community • Visual Studio Community 2022 version 17.8.34309.116 • Windows 10 SDK version 10.0.22621.0 [√] Android Studio (version 2021.1) • Android Studio at C:\Program Files\Android\Android Studio • Flutter plugin can be installed from: https://plugins.jetbrains.com/plugin/9212-flutter • Dart plugin can be installed from: https://plugins.jetbrains.com/plugin/6351-dart • Java version OpenJDK Runtime Environment (build 11.0.11+9-b60-7590822) [√] IntelliJ IDEA Ultimate Edition (version 2023.1) • IntelliJ at C:\Program Files\JetBrains\IntelliJ IDEA 2021.3.3 • Flutter plugin version 74.0.4 • Dart plugin version 231.9065 [√] VS Code (version 1.88.1) • VS Code at C:\Users\andreacarmagnola\AppData\Local\Programs\Microsoft VS Code • Flutter extension version 3.38.1 [√] Connected device (3 available) • Windows (desktop) • windows • windows-x64 • Microsoft Windows [Versione 10.0.22621.1105] • Chrome (web) • chrome • web-javascript • Google Chrome 124.0.6367.60 • Edge (web) • edge • web-javascript • Microsoft Edge 118.0.2088.76 [√] Network resources • All expected network resources are available. • No issues found!