Sunday, March 26, 2023

Flutter plugin to use Chrome Custom Tabs

@flutter_custom_tabs is a Flutter plugin to use custom chrome tab .So we can load any website url inside chrome tag.The look and feel is exactly similar to chrome tab. You can check the demo the options are similar to Chrome options.Custom Tabs is supported only Chrome for Android For this reason, the interface is same, but behavior is little bit different:

In android if chrome is installed (By default chrome is inbuilt installed all android device)opening a url in custom tab plugin you will get same look and feeling .Suppose if chrome is not installed then its open in other default browser.

In iOS open SFSafariViewController using url_launcher, and all options at launch are ignored.

Installation

Add flutter_custom_tabs to the dependencies of your pubspec.yaml.

dependencies:
  flutter_custom_tabs: ^0.6.0

Example

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: Center(
          child: FlatButton(
            child: const Text('Show Flutter homepage'),
            onPressed: () => _launchURL(context),
          ),
        ),
      ),
    );
  }

  void _launchURL(BuildContext context) async {
    try {
      await launch(
        'https://flutter.dev',
        option: CustomTabsOption(
          toolbarColor: Theme.of(context).primaryColor,
          enableDefaultShare: true,
          enableUrlBarHiding: true,
          showPageTitle: true,
          animation: CustomTabsAnimation.slideIn()
          // or user defined animation.
          animation: const CustomTabsAnimation(
            startEnter: 'slide_up',
            startExit: 'android:anim/fade_out',
            endEnter: 'android:anim/fade_in',
            endExit: 'slide_down',
          ),
          extraCustomTabs: const <String>[
            // ref. https://play.google.com/store/apps/details?id=org.mozilla.firefox
            'org.mozilla.firefox',
            // ref. https://play.google.com/store/apps/details?id=com.microsoft.emmx
            'com.microsoft.emmx',
          ],        
        ),
      );
    } catch (e) {
      // An exception is thrown if browser app is not installed on Android device.
      debugPrint(e.toString());
    }
  }
}

Demo

screenshot