Android: Starting with version 6.0.0-beta.6 - Backdrop Filter blur not working anymore

[AlexDochioiu]

• [x] I have read the Get Started - Installation section
• [x] I have read and done the Get Started - Setup Android section
• [x] I have read and done the Get Started - Setup iOS section
• [x] I have already searched for the same problem

Environment

Technology	Version
Flutter version	3.3.7
Plugin version	6.0.0-beta.6
Android version	Android 12 (API 31)
iOS version	not relevant
Xcode version	not relevant

Device information: Xiaomi Redmin Note 11 Pro

Description

Starting with version 6.0.0-beta.6 up to 6.0.0-beta.12 ( 6.0.0-beta.5 works well), there seem to be issues drawing a blur (BackdropFilter) on Android when a WebView is present. Somehow the blur doesn't apply at all (outside of the webview as well) starting with that version.

Expected behavior: Blur over the whole screen should still work

Current behavior: There is no blur at all anywhere on the screen starting with the mentioned version

Steps to reproduce

My exact scenario, is drawing a bottom sheet with a blurred overlay. What I am using is:

modal_bottom_sheet: ^2.1.2

Code to draw the bottom sheet with a blurred barrier:

import 'dart:ui';

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

Future<T?> showBlurredBarBottomSheet<T>({
  required BuildContext context,
  required WidgetBuilder builder,
  double elevation = 2,
  ShapeBorder shape = const RoundedRectangleBorder(
    borderRadius: BorderRadius.only(topLeft: Radius.circular(25), topRight: Radius.circular(25)),
  ),
  Clip? clipBehavior,
  Curve? animationCurve,
  Duration? duration,
  RouteSettings? settings,
  double? closeProgressThreshold,
  AnimationController? secondAnimation,
  Color? backgroundColor,
  Color? barrierColor,
  bool bounce = false,
  bool useRootNavigator = true,
  bool isDismissible = true,
  bool enableDrag = true,
}) {
  final sheetContent = Column(
    mainAxisSize: MainAxisSize.min,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      const SizedBox(height: 15),
      Container(
        height: 3,
        width: 40,
        decoration: const BoxDecoration(
          color: Color(0xFF979797),
          borderRadius: BorderRadius.all(Radius.circular(6)),
        ),
      ),
      const SizedBox(height: 15),
      Flexible(
        flex: 1,
        fit: FlexFit.loose,
        child: SizedBox(width: double.infinity, child: builder(context)),
      ),
    ],
  );

  return showCustomModalBottomSheet(
    context: context,
    containerWidget: ((context, animation, child) => child),
    builder: (context) => BackdropFilter(
      filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
      child: SafeArea(
        bottom: false,
        child: Material(
          shape: shape,
          clipBehavior: clipBehavior ?? (Theme.of(context).brightness == Brightness.dark ? Clip.antiAlias : Clip.none),
          color: backgroundColor ??
              (Theme.of(context).brightness == Brightness.dark ? const Color(0xB2191F2C) : const Color(0xFFFFFFFF)),
          elevation: elevation,
          child: Theme.of(context).brightness == Brightness.dark
              ? BackdropFilter(
                  // extra blur only on dark mode
                  filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
                  child: sheetContent,
                )
              : Container(
                  decoration: const BoxDecoration(
                    color: Color(0xFFFFFFFF),
                    borderRadius: BorderRadius.vertical(top: Radius.circular(25)),
                    boxShadow: [BoxShadow(color: Colors.black26, blurRadius: 5, blurStyle: BlurStyle.outer)],
                  ),
                  child: sheetContent,
                ),
        ),
      ),
    ),
    elevation: elevation,
    shape: shape,
    clipBehavior: clipBehavior,
    animationCurve: animationCurve,
    duration: duration,
    settings: settings,
    closeProgressThreshold: closeProgressThreshold,
    secondAnimation: secondAnimation,
    barrierColor: barrierColor ??
        (Theme.of(context).brightness == Brightness.dark ? const Color(0x80000000) : const Color(0x147E7E33)),
    backgroundColor: Colors.transparent,
    bounce: bounce,
    expand: false,
    useRootNavigator: useRootNavigator,
    isDismissible: isDismissible,
    enableDrag: enableDrag,
  );
}

In app web view code with the settings:

InAppWebView(
  initialSettings: InAppWebViewSettings(
    transparentBackground: true, // to avoid white flash on dark mode
    javaScriptEnabled: true,
    // useShouldOverrideUrlLoading: true,
    mediaPlaybackRequiresUserGesture: false,
    useHybridComposition: true,
    allowsInlineMediaPlayback: true,
    rendererPriorityPolicy: RendererPriorityPolicy(
      rendererRequestedPriority: RendererPriority.RENDERER_PRIORITY_IMPORTANT,
      waivedWhenNotVisible: true,
      ),
    geolocationEnabled: false,
  ),
  onProgressChanged: (controller, progress) =>
    ref.read(webViewPageNotifierProvider.notifier).onProgressChanged(progress / 100.0),
  onLoadStart: (controller, url) =>
    ref.read(webViewPageNotifierProvider.notifier).onLoadStart(url?.toString()),
  onUpdateVisitedHistory: (controller, url, isReload) =>
    ref.read(webViewPageNotifierProvider.notifier).onUpdateVisitedHistory(url?.toString()),
  onWebViewCreated: (controller) =>
    ref.read(webViewPageNotifierProvider.notifier).onWebViewCreated(controller, context),
  onLoadStop: (controller, url) =>
    ref.read(webViewPageNotifierProvider.notifier).onLoadStop(url?.toString()),
);

Working version: 6.0.0-beta.5

Not working version: 6.0.0-beta.6

[github-actions[bot]]

👋 @AlexDochioiu

NOTE: This comment is auto-generated.

Are you sure you have already searched for the same problem?

Some people open new issues but they didn't search for something similar or for the same issue. Please, search for it using the GitHub issue search box or on the official inappwebview.dev website, or, also, using Google, StackOverflow, etc. before posting a new one. You may already find an answer to your problem!

If this is really a new issue, then thank you for raising it. I will investigate it and get back to you as soon as possible. Please, make sure you have given me as much context as possible! Also, if you didn't already, post a code example that can replicate this issue.

In the meantime, you can already search for some possible solutions online! Because this plugin uses native WebView, you can search online for the same issue adding android WebView [MY ERROR HERE] or ios WKWebView [MY ERROR HERE] keywords.

Following these steps can save you, me, and other people a lot of time, thanks!

[AlexDochioiu]

@pichillilorenzo Seems that the issue is related to the hybrid composition changes introduced in beta.6. I expect it's got to do with hybridComposition using initExpensiveAndroidView starting with that version.

[AlexDochioiu]

P.S. disabling hybrid composition makes the backdrop filter work again starting with beta.6.

[pichillilorenzo]

@AlexDochioiu thanks, so the problem is related to how Flutter Hybrid Composition currently works. Unfortunately, that's a bug of Flutter itself and not of this plugin. I think you should open an issue on the official Flutter repository related to this bug.

So, currently, if the backdrop filter is a MUST for you, you should disable hybrid composition as a workaround.

[sinahamedi67]

I had the same problem but resolved with this commit on flutter engine which put the platform views behind the backdrop and released with Flutter 3.10 on stable channel.

[github-actions[bot]]

This issue is stale and has been automatically closed because it has been open for more than 365 days with no activity. Please reopen a new issue if you still have it.

[shubham16g]

Same here, I am developing a windows 11 clone. Lots of UI components have blur backdrop filter, but when InAppWebView appears on screen, all the backdrop filter blur disappears.

[github-actions[bot]]

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 and a minimal reproduction of the issue.