Blur filter issue on iOS when animating a blurred widget

This issue has been created since 2022-11-23.

Steps to Reproduce

  1. GitHub repo with reproducible example
  2. Checkout on branch "bug_animation"
  3. Run the app on iOS device, preferably iOS simulator

Expected results:

Animated blurred widget should animate without creating any blur effect on other widgets

Actual results:

When the blurred widget animates in (from left to right edge of the screen), there is a visible blur entering from the right edge of the screen following the animation of the widget, so instead of the blur only happening on the left side, it also happens on the right side. When the widget is animating out (from right to left edge of the screen), the blur effect is also animating out. Seems like the blur effect is mirrored compared to the behaviour of the widget. On the screenshots, the green border show the widget that is animating in, and the red border the unwanted blur effect.

Code
// Moveable.dart
// Moveable widget wraps any child widget passed with Positioned and Gesture detector
// and updates the Positioned top and left properties with current x and y position
// of the pointing device (touch or mouse)

 Positioned(
        top: _y,
        left: _x,
        child: GestureDetector(
          onPanUpdate: (details) {
            setState(() {
              _y += details.delta.dy;
              _x += details.delta.dx;
            });
          },
          child: widget.child,
        ),
      ),
// Translatable.dart
// Translatable widget wraps foreground and background widgets passed and translates between them
// using SlideTransition and FadeTransition

AnimatedBuilder(
      animation: _animationController.view,
      builder: ((context, child) {
        return Stack(
          children: [
            if (_backgroundSheet != null)
              SlideTransition(
                position: _backgroundSlideAnimation,
                child: FadeTransition(
                  opacity: _backgroundFadeAnimation,
                  child: Transform.scale(
                    scale: _backgroundScaleAnimation.value,
                    child: _backgroundSheet,
                  ),
                ),
              ),
            if (_foregroundSheet != null)
              SlideTransition(
                position: _foregroundSlideAnimation,
                child: FadeTransition(
                  opacity: _foregroundFadeAnimation,
                  child: Transform.scale(
                    scale: 1,
                    child: _foregroundSheet,
                  ),
                ),
              ),
          ],
        );
      }),
    );
// main.dart
// Renders Stack with Google Maps widget and Translatable widget which translates a widget onto the map
Translatable(
    foreground: BlurredBlock0(),
    background: BlurredBlock1(),
),
Logs

[✓] Flutter (Channel master, 3.5.0-12.0.pre.175, on macOS 13.0 22A380 darwin-x64, locale en-HR)
    • Flutter version 3.5.0-12.0.pre.175 on channel master at /Users/erikkiralj/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 92f10ed712 (2 weeks ago), 2022-11-08 17:57:52 -0800
    • Engine revision e7d7edab98
    • Dart version 2.19.0 (build 2.19.0-374.0.dev)
    • DevTools version 2.19.0

[✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
    • Android SDK at /Users/erikkiralj/Library/Android/sdk
    • Platform android-33, build-tools 32.0.0
    • Java binary at: /Users/erikkiralj/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/213.7172.25.2113.9123335/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14B47b
    • CocoaPods version 1.11.3

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

[✓] Android Studio (version 2021.3)
    • Android Studio at /Users/erikkiralj/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/213.7172.25.2113.9123335/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
    • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)

[✓] Android Studio (version 2021.2)
    • Android Studio at /Users/erikkiralj/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/212.5712.43.2112.8815526/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
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)

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

[✓] Connected device (3 available)
    • iPad Pro (12.9-inch) (6th generation) (mobile) • ACDD46C2-E0C9-4F97-8E7C-DF60FC3EDF80 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-16-1 (simulator)
    • macOS (desktop)                                • macos                                • darwin-x64     • macOS 13.0 22A380 darwin-x64
    • Chrome (web)                                   • chrome                               • web-javascript • Google Chrome 107.0.5304.110

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

Video example

Simulator.Screen.Recording.-.iPad.Pro.12.9-inch.6th.generation.-.2022-11-23.at.13.53.39.mp4

Screenshot 2022-11-23 at 15 38 53

Screenshot 2022-11-23 at 15 39 08

mario-jerkovic wrote this answer on 2022-11-24

@cyanglaz forgot to mention this problem on my last issue for platform blur

huycozy wrote this answer on 2022-11-24

Hi @erikkiralj1, thanks for filing a detailed issue.
As I can see you are using google_maps_flutter in the demo. Is it necessary to reproduce this issue? If not, please update the code sample to be minimal so we can continue to investigate. Thank you!

erikkiralj1 wrote this answer on 2022-11-24

Hello @huycozy, thanks for the quick reply. The issue persists with any widget that is not part of Material UI package. In this case I tried it with google_maps_flutter and some other map providers, and now I tried it with webview_flutter, but the result is still the same.

Code
 return MaterialApp(
      home: Scaffold(
        body: Stack(
          children: const [
            WebView(
              initialUrl: 'https://flutter.dev',
            ),
            Translatable(
              foreground: BlurredBlock0(),
              background: BlurredBlock1(),
            ),
          ],
        ),
      ),
    );
huycozy wrote this answer on 2022-11-24

Hi @erikkiralj1
I mean whether the issue still persists if there is a common widget in framework UI widget (such as Container, Text, etc) instead of a PlatformView. You may try removing or replacing it to see if the issue still persists. Thank you!

erikkiralj1 wrote this answer on 2022-11-24

@huycozy There is no issue when using a common widget, I tried using a Container instead of a PlatformView used by the map, and the issue is gone. However, with any other third-party package, the issue is still there.

huycozy wrote this answer on 2022-11-25

@erikkiralj1 thanks for the confirmation. This issue is reproducible on the latest stable and master channels with provided sample code.

Android iOS

: No Issue : Issue reproduced

Demo (screenshot Android and iOS)
iOS Android
Demo video (Android and iOS)
iOS Android
ios.mov
android.mov
flutter doctor -v (stable and master)
[✓] Flutter (Channel stable, 3.3.9, on macOS 13.0 22A380 darwin-x64, locale en-VN)
    • Flutter version 3.3.9 on channel stable at /Users/huynq/Documents/GitHub/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision b8f7f1f986 (31 hours ago), 2022-11-23 06:43:51 +0900
    • Engine revision 8f2221fbef
    • Dart version 2.18.5
    • DevTools version 2.15.0

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-33, build-tools 31.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.0.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14A400
    • CocoaPods version 1.11.3

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

[✓] Android Studio (version 2021.3)
    • 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
    • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)

[✓] IntelliJ IDEA Community Edition (version 2022.2.2)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 70.0.5
    • Dart plugin version 222.4167.21

[✓] IntelliJ IDEA Community Edition (version 2022.1.1)
    • IntelliJ at /Users/huynq/Library/Application Support/JetBrains/Toolbox/apps/IDEA-C/ch-0/221.5591.52/IntelliJ IDEA CE.app
    • 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

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

[✓] Connected device (3 available)
    • SM T225 (mobile) • R9JT3004VRJ • android-arm64  • Android 12 (API 31)
    • macOS (desktop)  • macos       • darwin-x64     • macOS 13.0 22A380 darwin-x64
    • Chrome (web)     • chrome      • web-javascript • Google Chrome 107.0.5304.110

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!
[!] Flutter (Channel master, 3.6.0-7.0.pre.52, on macOS 13.0 22A380 darwin-x64, locale en-VN)
    • Flutter version 3.6.0-7.0.pre.52 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 ff59250dbe (4 hours ago), 2022-11-24 18:08:30 -0500
    • Engine revision 7665ae5184
    • Dart version 2.19.0 (build 2.19.0-429.0.dev)
    • DevTools version 2.19.0
    • 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 31.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-33, build-tools 31.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.0.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14A400
    • CocoaPods version 1.11.3

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

[✓] Android Studio (version 2021.3)
    • 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
    • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)

[✓] IntelliJ IDEA Community Edition (version 2022.2.2)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 70.0.5
    • Dart plugin version 222.4167.21

[✓] IntelliJ IDEA Community Edition (version 2022.1.1)
    • IntelliJ at /Users/huynq/Library/Application Support/JetBrains/Toolbox/apps/IDEA-C/ch-0/221.5591.52/IntelliJ IDEA CE.app
    • 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

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

[✓] Connected device (3 available)
    • Pixel 3a (mobile) • 964AY0WL20 • android-arm64  • Android 12 (API 32)
    • macOS (desktop)   • macos      • darwin-x64     • macOS 13.0 22A380 darwin-x64
    • Chrome (web)      • chrome     • web-javascript • Google Chrome 107.0.5304.110

[✓] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 1 category.
cyanglaz wrote this answer on 2022-11-28
cyanglaz wrote this answer on 2022-11-28

Using mutator stack for visual effect view (suggested in #115926 (comment)) might fix this at the same time.

More Details About Repo
Owner Name flutter
Repo Name flutter
Full Name flutter/flutter
Language Dart
Created Date 2015-03-06
Updated Date 2022-12-10
Star Count 147243
Watcher Count 3561
Fork Count 23950
Issue Count 11325

YOU MAY BE INTERESTED

Issue Title Created Date Comment Count Updated Date
Use the command line to directly execute cnosql, for example: `cnosdb-cli execute "select*from` 0 2022-07-04 2022-09-23
Command line options, `cnosdb-cli --database` 0 2022-07-04 2022-09-23
Вертикальное расположение окна глобального поиска 0 2021-01-07 2022-11-11
Multiple crashes in parsing PPM and J2K files 8 2022-02-10 2022-08-17
Open Pilot and Checkbox "Check for updates" result in crash. 4 2017-04-16 2022-11-12
Add support for DELIMITER statement MySql / MariaDB 3 2021-04-23 2022-08-17
Set up weekly tests on Jet to run three coupled p8 tests 0 2022-03-10 2022-10-11
Can't build ufs-weather-model without -DINLINE_POST=ON 2 2022-07-27 2022-12-09
Project3D error 0 2021-11-16 2021-12-28
Change where the bookmarks bar appears 1 2021-03-29 2022-11-12
Testnet faucet - recaptcha invalid domain for site key 2 2022-08-27 2022-12-02
Doc Request: Karpenter Analog to Priority Expander 4 2021-12-02 2022-10-21
Failed to fetch pe-wasm 3 2019-04-01 2022-11-21
rotated pole data plots incorrectly for a grid_north_pole_longitude = 0 4 2022-09-22 2022-11-17
SMART-TV reporting the wrong Browser 0 2022-11-03 2022-11-25
Error: ENDENT: no such file or directory, open '~/.config/solana/devnet.json' 1 2022-02-12 2022-10-30
Include an OTF version of the 5x8 font in releases 1 2020-09-16 2022-11-30
Conceding in a local game can make other players unable to concede. 2 2022-10-10 2022-11-16
Typescript compilation errors trigger infinite reloads 5 2021-10-17 2022-11-29
bug: ClickToPlay not accessible on part of the video screen 1 2021-05-10 2022-11-21
Support for MathJax 0 2021-09-01 2022-01-14
The field value has a semicolon, SQL sometimes parses incorrectly and sometimes parses normally 1 2021-12-04 2022-11-20
Repeated calls to calculate wake can result in wrong wake calculations 6 2022-03-08 2022-11-03
Extra space character in mpd_status 4 2021-01-08 2022-10-30
neodev change broke detection of plugins 1 2022-10-21 2022-11-11
Any swift 4 support ? 3 2018-02-09 2022-12-06
python setup.py install出错Could not find suitable distribution for Requirement.parse('pyld==2.0.3') 5 2022-11-19 2022-12-09
Support EIP1186 and get_Proof method 0 2022-01-26 2022-12-01
Zarr spatial transformation serialization notebook. 0 2021-04-30 2022-11-24
Dependabot can't resolve your Go dependency files 1 2021-03-22 2022-12-09
[Translation] Tagalog language update 1 2021-12-01 2022-11-03
Test Skill / Simulator goes blank 4 2021-05-06 2022-11-10
tailwindcss style 1 2021-10-18 2022-01-16
Support `numbers` system table in new planner 0 2022-05-02 2022-12-02
https://perf.databend.rs/ does not work 1 2022-05-04 2022-11-30
PermissionManagementProvider has not been registered 1 2021-09-08 2022-11-15
Add otel collector sample in doc page 9 2021-12-17 2022-10-09
[bug] [lockfiles] Build-require XXX cannot be found in lockfile 4 2022-01-14 2022-10-10
onCommit hook fails after moving mathfield 1 2021-08-10 2022-08-31
Refactor `ballot_style` where it actually an id` 0 2021-02-26 2022-11-05
Not able to export bidding_strategy.type in csv 2 2022-03-28 2022-08-23
Add WITHOUT ROWID for SQLite 1 2022-07-19 2022-11-18
ssl certificate not accepted when using sqlalchemy 1 2022-06-08 2022-09-19
Build Representer and Analyzer 1 2021-01-29 2022-11-23
[strict-mode] unknown config directive: http-mode 1 2021-01-13 2022-11-21
[BUG] Widget freeze for some HTML content 7 2021-12-27 2022-11-12
Bump jquery from 3.4.1 to 3.5.0 0 2020-04-29 2022-09-11
MissingPluginException 4 2021-03-15 2022-11-14
How to base generic derived "ToJSON" key determination on typeclass 0 2022-10-26 2022-11-29
File picker and Image picker not working due to plugins not automatically attaching to FragmentActivity 3 2022-04-20 2022-09-29