launchCustomTab function

Future<void> launchCustomTab(
  1. String urlString, {
  2. required BuildContext context,
  3. Color? appBarColor,
  4. CustomTabsOptions? customTabsOption,
  5. SafariViewControllerOptions? safariVCOption,
})

Open the given URL in a 'Custom Tab', which is a window provided by browser developers to display web pages in a view that looks integrated with the rest of the app.

On Android, custom tabs are typically launched in Chrome, but custom tabs will also be launched in Firefox or Edge if Chrome is not available.

On iOS, this will launch a Safari View Controller which is the closest equivalent to a custom tab.

The colors of the custom tab chrome will be based on the app's current theme. It can be overriden by providing an appBarColor. The corresponding text / icon color will be calculated automatically.

This function provides Kohler-specific defaults for the custom tabs launch, but this can be overriden by providing a customTabsOption or safariVCOption.

Implementation

Future<void> launchCustomTab(
  String urlString, {
  required BuildContext context,
  Color? appBarColor,
  CustomTabsOptions? customTabsOption,
  SafariViewControllerOptions? safariVCOption,
}) async {
  final toolbarColor = Color.alphaBlend(
    appBarColor ??
        context.theme.appBarTheme.backgroundColor ??
        context.colorScheme.surfaceContainerLowest,
    context.colorScheme.surfaceContainerLowest,
  );

  final toolbarLightness = ThemeData.estimateBrightnessForColor(toolbarColor);
  final primaryLightness =
      ThemeData.estimateBrightnessForColor(context.colorScheme.primary);

  final Color onToolbar;
  if (toolbarLightness != primaryLightness) {
    // Use the primary color for toolbar text if it contrasts enough
    // with the toolbar color
    onToolbar = context.colorScheme.primary;
  } else {
    // Use black or white toolbar text based on the lightness of the toolbar bg
    onToolbar = toolbarLightness.isLight ? Colors.black87 : Colors.white70;
  }

  return launchUrl(
    Uri.parse(urlString),
    customTabsOptions: CustomTabsOptions(
      colorSchemes: customTabsOption?.colorSchemes ??
          CustomTabsColorSchemes.defaults(
            colorScheme: toolbarLightness.toColorScheme(),
            toolbarColor: toolbarColor,
          ),
      urlBarHidingEnabled: customTabsOption?.urlBarHidingEnabled,
      shareState: customTabsOption?.shareState,
      showTitle: customTabsOption?.showTitle ?? true,
      instantAppsEnabled: customTabsOption?.instantAppsEnabled,
      closeButton: customTabsOption?.closeButton,
      animations: customTabsOption?.animations,
      browser: CustomTabsBrowserConfiguration(
        prefersDefaultBrowser: customTabsOption?.browser?.prefersDefaultBrowser,
        fallbackCustomTabs: customTabsOption?.browser?.fallbackCustomTabs ??
            kDefaultExtraCustomTabs,
        headers: customTabsOption?.browser?.headers,
      ),
    ),
    safariVCOptions: SafariViewControllerOptions(
      preferredBarTintColor:
          safariVCOption?.preferredBarTintColor ?? toolbarColor,
      preferredControlTintColor:
          safariVCOption?.preferredControlTintColor ?? onToolbar,
      barCollapsingEnabled: safariVCOption?.barCollapsingEnabled,
      entersReaderIfAvailable: safariVCOption?.entersReaderIfAvailable,
      dismissButtonStyle: safariVCOption?.dismissButtonStyle,
      modalPresentationStyle: safariVCOption?.modalPresentationStyle,
      pageSheet: safariVCOption?.pageSheet,
    ),
  );
}