how to get Chrome Powered webview in flutter?

Question

I've recently noticed that when a link is opened in some of few Android apps, they have this similar look and feel and the custom action menus with the "Powered by Chrome" below the custom menu. What component is used in this or is it still the Chromium WebView? Hopefully I'm looking to add them to my next projects which involve opening link inside an app. to Achieve like Desktop View in Flutter.

plaform: andriod webview: chrome powered webview with custom options framework: flutter

LinkedIn App

GMail App

my flutter doctor:

[√] Flutter (Channel beta, v0.11.9, on Microsoft Windows [Version 
10.0.17134.407], locale en-IN)
[√] Android toolchain - develop for Android devices (Android SDK 28.0.3)
[√] Android Studio (version 3.2)
[√] VS Code (version 1.29.1)
[√] VS Code, 64-bit edition (version 1.26.1)
[!] Connected device
! No devices available

my github issue: click here

thanks in advance.

Solution 1

You can use this package:

https://pub.dartlang.org/packages/flutter_custom_tabs

But note that this behaviour only works on Android, on iOS a Safari webview will be used.

Solution 2

You can try my plugin flutter_inappbrowser (EDIT: it has been renamed to flutter_inappwebview). To do that, you need to use the ChromeSafariBrowser class.

It uses Chrome Custom Tabs on Android and SFSafariViewController on iOS.

You can initialize the ChromeSafariBrowser instance with an InAppBrowser fallback instance.

An example:

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

class MyInAppBrowser extends InAppBrowser {

  @override
  Future onLoadStart(String url) async {
    print("\n\nStarted $url\n\n");
  }

  @override
  Future onLoadStop(String url) async {
    print("\n\nStopped $url\n\n");
  }

  @override
  void onLoadError(String url, int code, String message) {
    print("\n\nCan't load $url.. Error: $message\n\n");
  }

  @override
  void onExit() {
    print("\n\nBrowser closed!\n\n");
  }

}

class MyChromeSafariBrowser extends ChromeSafariBrowser {

  MyChromeSafariBrowser(browserFallback) : super(bFallback: browserFallback);

  @override
  void onOpened() {
    print("ChromeSafari browser opened");
  }

  @override
  void onLoaded() {
    print("ChromeSafari browser loaded");
  }

  @override
  void onClosed() {
    print("ChromeSafari browser closed");
  }
}

void main() => runApp(new MyApp());

class MyApp extends StatefulWidget {
  final ChromeSafariBrowser browser = new MyChromeSafariBrowser(new MyInAppBrowser());

  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('ChromeSafariBrowser Example'),
        ),
        body: Center(
          child: RaisedButton(
              onPressed: () async {
                await widget.browser.open(
                    url: "https://flutter.dev/",
                    options: ChromeSafariBrowserClassOptions(
                        androidChromeCustomTabsOptions: AndroidChromeCustomTabsOptions(addShareButton: false),
                        iosSafariOptions: IosSafariOptions(barCollapsingEnabled: true)));
              },
              child: Text("Open Chrome Safari Browser")),
        ),
      ),
    );
  }
}

Comments

[Bruno Yuzo]

I'm using your plugin. Do you know if is possible to work with ChromeSafariBrowser class in full screen? (without showing URL Bar)

[Bruno Yuzo]

I just found that acording to this post, is not possible: stackoverflow.com/questions/38491936/…

[jay padaliya]

Is it possible to run custom javascript code in your webview?

[Erfan Eghterafi]

If you have freeze app problem on release build, check this issue github.com/droibit/flutter_custom_tabs/issues/21