Flutter, how to make 'webview_flutter' set to chrome

Viewed 980

I want to make "webview_flutter" package run only on the chrome browser.

But I don't know if this is possible or not.

Or if I'm misunderstanding something, please let me know as well.

1 Answers

You can try the plugin 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 exemple :

     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")),
             ),
           ),
         );
       }
     }

or you can make your own browser follow this exemple : https://inappwebview.dev/docs/in-app-webview/basic-usage/

Related