Cannot use ImageFilter over Unity Widget

[utkarshgupta2504]

Describe the bug
Image Filter gets ignored atop of this UnityWidget.
Using ImageFilter.blur for giving an aesthetic container for controlling the widget.
Works on the normal camera widget provided by flutter flawlessly

To Reproduce
Steps to reproduce the behavior:

1. Initialize the Unity Application (Export and setting up)
2. Using a Stack widget, place UnityWidget, and then a ClipRRect with BackdropFilter(filter: ImageFilter.blur())

Expected behavior
The screen should have a blurred container on top of the UnityWidget

Screenshots

Unity:

• OS: MacOS 13
• Version: v2021.3.11f1

Smartphone:

• Device: Samsung A52s
• OS: Android
• Version: 12

[sundong212]

Same here.

What's your flutter version? I'm on 2.10.4, which is relatively outdated. I'm gonna try to upgrade to the latest. Since I found this
flutter/flutter#43902

They said it's been fixed. But I doubt if this can fix the unity issue. But internally, both of them are having the same issue because of the different renderer engine.

[timbotimbo]

Just did a quick test on android with Flutter 3.3.8.

Just like the rounded corners, the blur works with useAndroidViewSurface: false (left).
Both are broken for useAndroidViewSurface: true (right), which has quite a few bugs like this.

Code snippet

 Card(
  color: Colors.transparent,
  elevation: 0,
  child: ClipRRect(
	child: BackdropFilter(
	  filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
	  child: Column(
		children: <Widget>[
		  Padding(
			padding: const EdgeInsets.only(top: 20),
			child: Text("Rotation speed:"),
		  ),
		  Slider(

I believe you switched to useAndroidViewSurface: true because of touch input issues.
The main drawback of using false is that touch input is broken with Unity's new input package, you'll need to use the legacy input system or a mix of both.
Besides touch, this setup is more reliable in my experience.

According to the changelog, this should work on iOS since Flutter 3.7, but I haven't tried it yet.

[utkarshgupta2504]

Just did a quick test on android with Flutter 3.3.8.

Just like the rounded corners, the blur works with useAndroidViewSurface: false (left).
Both are broken for useAndroidViewSurface: true (right), which has quite a few bugs like this.

I believe you switched to useAndroidViewSurface: true because of touch input issues.
The main drawback of using false is that touch input is broken with Unity's new input package, you'll need to use the legacy input system or a mix of both.
Besides touch, this setup is more reliable in my experience.

Yeah have been using the new input package, but that is an interesting insight, will try it out with my AR application, if it works, I will update this comment, thank you so much!

[sundong212]

Just did a quick test on android with Flutter 3.3.8.

Just like the rounded corners, the blur works with useAndroidViewSurface: false (left). Both are broken for useAndroidViewSurface: true (right), which has quite a few bugs like this.

Code snippet
I believe you switched to useAndroidViewSurface: true because of touch input issues. The main drawback of using false is that touch input is broken with Unity's new input package, you'll need to use the legacy input system or a mix of both. Besides touch, this setup is more reliable in my experience.

According to the changelog, this should work on iOS since Flutter 3.7, but I haven't tried it yet.

Still not working on iOS by Flutter 3.7

[timbotimbo]

I see blur failing for google_maps_flutter too when you enable Hybrid composition mode.

if (mapsImplementation is GoogleMapsFlutterAndroid) {
    mapsImplementation.useAndroidViewSurface = true;
  }

I assume this is a general bug in Flutter with this type of Platform View.

[ShakeelKhalid1913]

hey if you are able to run the project can you help me. i cant find any source for flutter 3.7.x