Flutter+InAppWebView：三星A53上ChromeSafariBrowser顶部栏异常及适配问询

三星A53默认浏览器为三星互联网浏览器，而ChromeSafariBrowser组件在Android端会优先调用系统默认的Chrome兼容类浏览器。三星互联网浏览器的UI渲染逻辑、顶部栏样式与原生Chrome存在差异，尤其是地址栏半透明效果、安全锁定图标的渲染未遵循Chrome规范，导致出现与预期不符的显示问题。其他三星设备（如S21、S8）默认浏览器为Chrome，因此能正常渲染出预期的顶部栏样式。

1. 强制指定打开Chrome浏览器 #

通过配置AndroidChromeCustomTabsOptions，指定仅使用Chrome浏览器处理链接，修改代码如下：

Uri uri = Uri.parse(value);
ChromeSafariBrowser().open(
  url: uri,
  options: ChromeSafariBrowserClassOptions(
    ios: IOSSafariOptions(
      barCollapsingEnabled: true,
    ),
    android: AndroidChromeCustomTabsOptions(
      // 指定Chrome浏览器包名
      packageName: "com.android.chrome",
    ),
  ),
);

注意：若设备未安装Chrome，此方法会失效，需提前做兼容判断。

2. 替代方案：使用InAppWebView内嵌加载 #

如果无需跳转到外部浏览器，可直接用InAppWebView组件内嵌加载链接，完全自定义顶部栏样式，规避系统浏览器差异：

InAppWebView(
  initialUrlRequest: URLRequest(url: Uri.parse(value)),
  initialOptions: 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,
    ),
  ),
  // 可通过Stack组件包裹实现自定义顶部栏
);

3. 兼容三星互联网浏览器（不推荐） #

若需兼容三星互联网浏览器，可检测当前默认浏览器包名（三星互联网包名通常为com.sec.android.app.sbrowser），针对其单独配置样式，但此方法依赖三星浏览器自定义API，兼容性较差，仅作为备选方案。

内容的提问来源于stack exchange，提问作者Anna R.