ImageFilter.blur strange padding on WEB

[Andrekarma]

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

[Paste your code here]

Screenshots or Video

Screenshots / Video demonstration

Logs

Logs

[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 7482962 (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!

[huycozy]

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)

Demo

Web	macOS

[Andrekarma]

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

    ]);

[huycozy]

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

Sample code

import 'dart:ui';

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        body: 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.asset(
                  "assets/flutter-3.png",
                  fit: BoxFit.cover,
                )),
          ),
        ]),
      ),
    ),
  );
}

flutter doctor -v (stable and master)

[✓] Flutter (Channel stable, 3.19.6, on macOS 14.1 23B74 darwin-x64, locale en-VN)
    • Flutter version 3.19.6 on channel stable at /Users/huynq/Documents/GitHub/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 54e66469a9 (31 hours ago), 2024-04-17 13:08:03 -0700
    • Engine revision c4cd48e186
    • Dart version 3.3.4
    • DevTools version 2.31.1

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.3)
    • Xcode at /Applications/Xcode15.3.app/Contents/Developer
    • Build 15E204a
    • CocoaPods version 1.15.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2023.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • 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
    • android-studio-dir = /Applications/Android Studio.app/
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)

[✓] VS Code (version 1.88.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.86.0

[✓] Connected device (3 available)
    • RMX2001 (mobile) • EUYTFEUSQSRGDA6D • android-arm64  • Android 11 (API 30)
    • macOS (desktop)  • macos            • darwin-x64     • macOS 14.1 23B74 darwin-x64
    • Chrome (web)     • chrome           • web-javascript • Google Chrome 123.0.6312.124

[✓] Network resources
    • All expected network resources are available.

• No issues found!

[!] Flutter (Channel master, 3.22.0-18.0.pre.53, on macOS 14.1 23B74 darwin-x64, locale en-VN)
    • Flutter version 3.22.0-18.0.pre.53 on channel master at /Users/huynq/Documents/GitHub/flutter_master
    ! Warning: `flutter` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 098e7e7ff3 (2 hours ago), 2024-04-29 01:25:19 +0000
    • Engine revision 752b146df7
    • Dart version 3.5.0 (build 3.5.0-109.0.dev)
    • DevTools version 2.35.0-dev.16
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.3)
    • Xcode at /Applications/Xcode15.3.app/Contents/Developer
    • Build 15E204a
    • CocoaPods version 1.15.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2023.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • 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
    • android-studio-dir = /Applications/Android Studio.app/
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)

[✓] VS Code (version 1.88.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.86.0

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-x64     • macOS 14.1 23B74 darwin-x64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 124.0.6367.92

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.