search

RitickSaha / glassmorphism

Glassmorphic UI Package For Flutter || UI ||
https://pub.dev/packages/glassmorphism
Apache License 2.0
66 stars 26 forks source link

Glassmorphism effect doesnt work over googlemap on iOS #7

Closed C0RALINA closed 3 years ago

C0RALINA commented 3 years ago

Hi there,

Im developing an app using Flutter for both iOS and Android devices.

When the user taps on a marker on the map (GoogleMap) a Diologbox opens and displays the GlassmorphicContainer over the GoogleMap background, in turn displaying some text.

The effect works great on Android, but on iOS for some reason, the blurry glassmorphic effect only happens over widgets such as custom buttons, etc, but doesnt blur out the actual googlemap, text or markers on the googlemap. On Android, everything within the GlassmorphicContainer is blurred out perfectly.

Any ideas?

RitickSaha commented 3 years ago

Hi, @C0RALINA, Can you provide some more information like:

These will help me understand that what exactly the problem is. Making a wild guess by my understanding till now is that, GoogleMaps View can be a web view embedded into flutter and there can be a bug in flutter SDK with Ios specifically.

C0RALINA commented 3 years ago

Hi Ritick,

Thanks for replying to the question..

I'm using the latest googleMap flutter package (google_maps_flutter: ^2.0.6).

Code is similar to your example file, but here is a screenshot so you can see the difference between Android and iOS..

Android (Light and Dark mode) on the left, and iOS on the right.

Screenshot 2021-07-31 at 11 59 01 PM

Thanks for your help!

RitickSaha commented 3 years ago

@C0RALINA It seems that there are many devs who have faced this issue. Basically, this issue is because there is a bug in Flutter ios SDK related to BackDropFilter this issue can be coined as a clone for the issue link below. https://github.com/flutter/flutter/issues/56789

C0RALINA commented 3 years ago

Thanks for looking into this, hopefully the bug can be resolved.

BenjiFarquhar commented 1 year ago

This now works when switching the Flutter channel to beta. Not sure where exactly the cut-off point is for the minimum version of Flutter that has this working.

RitickSaha commented 1 year ago

@BenjiFarquhar Thanks for your finding. I will have a look into this, Let's see if I can find something to make it work in the new release.

BenjiFarquhar commented 1 year ago

@RitickSaha You're welcome. If you mean to make this package work on a google map with beta Flutter, it already does.

RitickSaha commented 1 year ago

That's good enough already but we can see the problem with the stable version. I guess the JS interoperability can be an issue. Just a wild guess.

BenjiFarquhar commented 1 year ago

It was a Flutter issue, so I don't think it will be possible. It was fixed last September/October by this, and this.