androidfluttergoogle-chromebrowserflutter-inappwebview

Wrong Chrome top bar on Android with Flutter and InAppWebView


UPDATE: The problem was, that Samsung A53 has Samsung Internet as default browser. So the question is, how ChromeSafariBrowser can handle it? Is it possible to force open Chrome or is there an another workaround?

On Samsung A53 (Android 13) using InAppWebView in Flutter, I am getting semi-transparent top bar in browser as well as a different lock icon, when opening a link with ChromeSafariBrowser.

Wrong top bar on Samsung A53

On other Android devices (Samsung S21 or Samsung S8 on Android 13) as well as on iOS it doesn't look semi-transparent and all navigation buttons look clear and good. It also should be like this:

Right top bar on Samsung S21 and Samsung S8

The code I am using to open a link in ChromeSafariBrowser:

Uri uri = Uri.parse(value);
  ChromeSafariBrowser().open(
    url: uri,
    options: ChromeSafariBrowserClassOptions(
      ios: IOSSafariOptions(
        barCollapsingEnabled: true,
      ),
    ),
  );

initialOptions for InAppWebView:

InAppWebViewGroupOptions(
      crossPlatform: InAppWebViewOptions(
          useShouldOverrideUrlLoading: true,
          supportZoom: false,
          disableContextMenu: true,
          verticalScrollBarEnabled: false,
          horizontalScrollBarEnabled: false,
      ),
      android: AndroidInAppWebViewOptions(
        useHybridComposition: true,
        disableDefaultErrorPage: true,
      ),
      ios: IOSInAppWebViewOptions(
        disallowOverScroll: false,
        allowsBackForwardNavigationGestures: false,
        allowsLinkPreview: false,
        disableLongPressContextMenuOnLinks: false,
      ));

What could be a reason for such behavior on Samsung A53?


Solution

  • ChromeSafariBrowser handles it like this with packageName set to 'com.android.chrome':

    ChromeSafariBrowser().open(
              url,
              options: ChromeSafariBrowserClassOptions(
                android: AndroidChromeCustomTabsOptions(
                  packageName: 'com.android.chrome',
                ),
                ios: IOSSafariOptions(
                  barCollapsingEnabled: true,
                ),
              ),
            );