UIKitView should support mutations: backdrop_filter

[sooxt98]

The google map won't get blur and appears black when applying backdrop filter on top.

[BondarenkoStas]

@sooxiaotong Please provide your flutter doctor -v output and specify which version of google_maps_flutter you use. Also can you provide a small code example that reproduces this behaviour?

[gabrielginter]

Same issue here, I have latest Flutter/plugins. I've seen it for more than 2 months, only affects iOS

[iapicca]

Hi @gabrielginter
could you please provide your updated flutter doctor -v
and a minimal code sample to reproduce the problem
Thank you

[Hixie]

As I understand it, this is an iOS limitation. @amirh can you confirm this is expected?

[amirh]

I believe this specific effect can be achieved by working a UIVisualEffectView into the hierarchy, it's non trivial amount of effort to do though.

[Marek00Malik]

Any news on this one ?

[sapurai]

Having the same issue here while trying to accomplish a frosted glass effect on top of the map for some UI Elements. Is there any simple solution only with flutter?

[sapurai]

As I understand it, this is an iOS limitation. @amirh can you confirm this is expected?

I have tested this issue on Android and iOS and it was only not working on iOS so I assume it is related to iOS only. Any idea where to start digging?

[TahaTesser]

Issue is reproducible

Code Sample

import 'dart:async';
import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      theme: ThemeData.dark(),
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  Completer<GoogleMapController> _controller = Completer();

  static final CameraPosition _kGooglePlex = CameraPosition(
    target: LatLng(37.42796133580664, -122.085749655962),
    zoom: 14.4746,
  );

  static final CameraPosition _kLake = CameraPosition(
      bearing: 192.8334901395799,
      target: LatLng(37.43296265331129, -122.08832357078792),
      tilt: 59.440717697143555,
      zoom: 19.151926040649414);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Material App Bar'),
      ),
      body: BackdropFilter(
        filter: ImageFilter.blur(sigmaX: 3.0, sigmaY: 3.0),
        child: Column(
          children: [
            FlutterLogo(
              size: 200,
            ),
            Container(
              height: 200,
              child: GoogleMap(
                mapType: MapType.hybrid,
                initialCameraPosition: _kGooglePlex,
                onMapCreated: (GoogleMapController controller) {
                  _controller.complete(controller);
                },
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {},
      ),
    );
  }
}

flutter doctor -v

[✓] Flutter (Channel dev, 1.19.0-2.0.pre, on Mac OS X 10.15.5 19F96, locale
    en-GB)
    • Flutter version 1.19.0-2.0.pre at /Users/tahatesser/Code/flutter_dev
    • Framework revision 1d395c5e18 (2 days ago), 2020-05-31 07:41:50 -0700
    • Engine revision 923687f0e7
    • Dart version 2.9.0 (build 2.9.0-11.0.dev 6489a0c68d)

 
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
    • Android SDK at /Users/tahatesser/Code/sdk
    • Platform android-29, build-tools 29.0.3
    • ANDROID_HOME = /Users/tahatesser/Code/sdk
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6222593)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 11.5)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.5, Build version 11E608c
    • CocoaPods version 1.9.3

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

[✓] Android Studio (version 4.0)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 45.1.2
    • Dart plugin version 193.7361
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6222593)

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

[✓] Connected device (3 available)
    • macOS      • macOS      • darwin-x64     • Mac OS X 10.15.5 19F96
    • Web Server • web-server • web-javascript • Flutter Tools
    • Chrome     • chrome     • web-javascript • Google Chrome 83.0.4103.61

• No issues found!

[devibrahimkarahan]

Any update on this?

I have the same issue on Agora Rtc View, I cant use blur filter on ios (Android works well).

[sapurai]

I am also still having this issue. Are there any plans on getting this fixed soon or is there a workaround we could use? Thanks! ☺️

[TahaTesser]

Preview

iOS	Android

code sample

import 'dart:async';
import 'dart:ui' as ui;

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      theme: ThemeData.dark(),
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  Completer<GoogleMapController> _controller = Completer();

  static final CameraPosition _kGooglePlex = CameraPosition(
    target: LatLng(37.42796133580664, -122.085749655962),
    zoom: 14.4746,
  );

  static final CameraPosition _kLake = CameraPosition(
      bearing: 192.8334901395799,
      target: LatLng(37.43296265331129, -122.08832357078792),
      tilt: 59.440717697143555,
      zoom: 19.151926040649414);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Blur on PlatformView'),
      ),
      body: Stack(
        fit: StackFit.expand,
        children: [
          Text('0' * 10000),
          Container(
            height: 200,
            child: GoogleMap(
              mapType: MapType.hybrid,
              initialCameraPosition: _kGooglePlex,
              onMapCreated: (GoogleMapController controller) {
                _controller.complete(controller);
              },
            ),
          ),
          BackdropFilter(
            filter: ui.ImageFilter.blur(
              sigmaX: 5.0,
              sigmaY: 5.0,
            ),
            child: Center(
              child: FlutterLogo(
                size: 200,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

flutter doctor -v

[✓] Flutter (Channel stable, 1.22.4, on macOS 11.0.1 20B29 darwin-x64, locale
    en-GB)
    • Flutter version 1.22.4 at /Users/tahatesser/Code/flutter_stable
    • Framework revision 1aafb3a8b9 (7 days ago), 2020-11-13 09:59:28 -0800
    • Engine revision 2c956a31c0
    • Dart version 2.10.4

 
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    • Android SDK at /Users/tahatesser/Code/sdk
    • Platform android-30, build-tools 30.0.2
    • ANDROID_HOME = /Users/tahatesser/Code/sdk
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6915495)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 12.2)
    • Xcode at /Volumes/Extreme/Xcode.app/Contents/Developer
    • Xcode 12.2, Build version 12B45b
    • CocoaPods version 1.10.0

[!] Android Studio (version 4.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6915495)

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

[✓] Connected device (2 available)
    • RMX2001 (mobile)   • EUYTFEUSQSRGDA6D                     • android-arm64
      • Android 10 (API 29)
    • iPhone 11 (mobile) • 0AF84B38-2849-42B8-9DDB-E6FBA0287FD4 • ios
      • com.apple.CoreSimulator.SimRuntime.iOS-14-2 (simulator)

! Doctor found issues in 1 category.

[timbrueckner]

Seems to also be present in 2.10.0.

[TheDavvy]

Still present, cannot blur Google Maps Widget with BackdropFilter + ImageFilter.blur on iOS. On Android is fine
Version: 2.10.0

[hansihe]

I am not involved with Flutter at all, but I have been working with the Embedder API and have hacked around the engine a bit, so I think I can give some context here.

Normal Widgets are rendered and composited using Skia, so all the effects Skia provides can be used without issues. An example of this is the blur effect.

Flutter handles platform views differently from normal Widgets. Flutter renders its UI consisting of normal widgets onto several layered textures, split apart at the layers where the platform views are located. These different stacked layers are then returned the the embedder where the embedder is responsible for actually compositing them together with the platform views interspersed.

This is why blur doesn't work on something like a WebView, what you are actually seeing on the screen is a "sandwich" of something like:

• The part of your app below the WebView rendered to a texture
• Your WebView, rendered by the platform embedder directly
• The part of your app above the ViewView rendered to a texture

Thus, Flutter doesn't actually render the platform view, and can't apply affects like blur directly by itself.

This is a tricky problem to solve in the general case, I can think of a few approaches the flutter team could take:

1. There is already the concept of "mutations" for platform views. Today these consist of clipping, rounded rectangle clipping, opacity and general transformation. A mutation could be introduced for blurring. There are some big downsides to this approach:
   1. This is not a general solution. It solves this issue in particular (blur), but one can imagine other types of effects that would remain a problem, and would have to be solved in the same way. This makes for quite a bit of work for people writing embedders.
   2. You can't really layer blurs on top of each other like this and get correct results (I think?). Even if you white out the area behind the platform view, I don't think normal layering of opacity would produce correct colors, might be solvable with a different blend mode? I am not too familiar with color theory, but I believe there are issues here. Might be more than good enough/unnoticable though.
2. Render the platform view to a texture and let Flutter/Skia do the compositing. This has some other drawbacks:
   1. This would not work with every view, as not every embedder would be able to render UI to a texture. An example of this is the WebView on iOS, which I think you can't really render to a texture like this efficiently? Might be wrong here though, I am not an iOS dev.
   2. This might introduce more latency on the view? This is probably not a major issue though.
   3. The purpose of platform views is not needing to give the embedder control over the texture. Flutter already supports rendering textures in the UI.

[ZhuBoao]

Any update on this issue now? I guess this may be tricky to fix, but it really affects lots of developers.

[Ahmadre]

I am not involved with Flutter at all, but I have been working with the Embedder API and have hacked around the engine a bit, so I think I can give some context here.

Normal Widgets are rendered and composited using Skia, so all the effects Skia provides can be used without issues. An example of this is the blur effect.

Flutter handles platform views differently from normal Widgets. Flutter renders its UI consisting of normal widgets onto several layered textures, split apart at the layers where the platform views are located. These different stacked layers are then returned the the embedder where the embedder is responsible for actually compositing them together with the platform views interspersed.

This is why blur doesn't work on something like a WebView, what you are actually seeing on the screen is a "sandwich" of something like:

• The part of your app below the WebView rendered to a texture

• Your WebView, rendered by the platform embedder directly

• The part of your app above the ViewView rendered to a texture

Thus, Flutter doesn't actually render the platform view, and can't apply affects like blur directly by itself.

This is a tricky problem to solve in the general case, I can think of a few approaches the flutter team could take:

1. There is already the concept of "mutations" for platform views. Today these consist of clipping, rounded rectangle clipping, opacity and general transformation. A mutation could be introduced for blurring. There are some big downsides to this approach:

   1. This is not a general solution. It solves this issue in particular (blur), but one can imagine other types of effects that would remain a problem, and would have to be solved in the same way. This makes for quite a bit of work for people writing embedders.

   2. You can't really layer blurs on top of each other like this and get correct results (I think?). Even if you white out the area behind the platform view, I don't think normal layering of opacity would produce correct colors, might be solvable with a different blend mode? I am not too familiar with color theory, but I believe there are issues here. Might be more than good enough/unnoticable though.

2. Render the platform view to a texture and let Flutter/Skia do the compositing. This has some other drawbacks:

   1. This would not work with every view, as not every embedder would be able to render UI to a texture. An example of this is the WebView on iOS, which I think you can't really render to a texture like this efficiently? Might be wrong here though, I am not an iOS dev.

   2. This might introduce more latency on the view? This is probably not a major issue though.

   3. The purpose of platform views is not needing to give the embedder control over the texture. Flutter already supports rendering textures in the UI.

You're bringing me to an idea 🤔 How about accessing native Blur-Effect? Like: extending PlatformViews to pass a parameter from Flutter, when Flutter wants a specific area to get blurred?

On my opinion it should not be that hard...I'll try to dig into this...

[albatrosify]

It would be a nice workaround but wouldn't you end up with an hard edge between flutters blur and the native blur? As they both don't consider (probably) what outside their respective area?

[ikallali]

+1
same here with Google Maps + blur...

[mono0926]

Proposal have been published: Flutter iOS PlatformView BackdropFilter

[cyanglaz]

Fixed with flutter/engine#34596 and flutter/engine#37086

[zatovagul]

Problem fixed on flutter channel master

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.