Flutter Webview - Opening External Links in Browser or Window

Question

I have an Android app made using Flutter Webview. When the user click on an external link, I want the link to open in the browser. How can I do it?

In fact, it would be nice to open external links in a window like Instagram does. Is there a way to do this?

Edit:

website.com is my app's homepage. That is not a external link. What I want is when trying to open a link other than website.com, it opens in a browser or a window.

Home Page:

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

class Forum extends StatefulWidget {
  @override
  _ForumState createState() => _ForumState();

}

class _ForumState extends State<Forum> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Forum',
        home: Scaffold(
          body: WebView(initialUrl: "https://website.com",
            javascriptMode: JavascriptMode.unrestricted,
          ),
        )
    );
  }
}

Answer 1

I had exactly the same problem and it cost me to solve it. Akif, even 5 months after your question, I will post the solution, because I believe it will still help a lot of people.

The solution below is using the STANDART FLUTTER WEBVIEW and also using the URL LAUNCHER.

Add the url_launcher and webview_flutter to your file pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  
  webview_flutter: ^1.0.5
  url_launcher: ^5.7.10

Now in your webview it needs to contain the navigationDelegate

See below...

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Title Your App',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: Scaffold(
            body: Container(
          child: WebView(
            initialUrl: 'https://website.com',
            javascriptMode: JavascriptMode.unrestricted,
            onWebViewCreated: (WebViewController webViewController) {
              _controller.complete(webViewController);
            },
            navigationDelegate: (NavigationRequest request) {
              if (request.url.startsWith("https://website.com")) {
                return NavigationDecision.navigate;
              } else {
                _launchURL(request.url);
                return NavigationDecision.prevent;
              }
            },
          ),
        )));
  }

  _launchURL(String url) async {
    if (await canLaunch(url)) {
      await launch(url);
    } else {
      throw 'Could not launch $url';
    }
  }
}

Don´t forget that you need to add URL LAUNCHER dependence.

import 'package:url_launcher/url_launcher.dart';

Explanation:

This code causes every request that is made within the webview to pass the following test:

• If the request address starts with your webview's start address, it normally does it within the webview.
• If the request address is different from the initial address of your webview, it launches that request to the phone's default browser.

I hope that maybe it will still help you or that it will help someone who needs it from now on.

Hugs.

Answer 2

you can use url_launcher plugin for this job

For that you need to add the plugin in your pubspec.yaml

so add url_launcher: ^5.7.10 in your pubspec,yaml file under dependencies

here is an example which will launch the website

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

void main() {
  runApp(Scaffold(
    body: Center(
      child: RaisedButton(
        onPressed: _launchURL,
        child: Text('Show Flutter homepage'),
      ),
    ),
  ));
}

_launchURL() async {
  const url = 'https:website.com';
  if (await canLaunch(url)) {
    await launch(url);
  } else {
    throw 'Could not launch $url';
  }
}

Answer 3

If you want to open link in a external browser then.try this url_launcher

For open browser, paste your url and call this on click,

also you can check your url contain your website or not.after this you can perform action,

    onPressed: () {
            var myUrl="https://website.com";
            if(myUrl.contains("website.com")){
              //place your website code
              print("its my website ");
            }else{
              _launchURL(myUrl);
            }
          }



  _launchURL(String myUrl) async {
    if (await canLaunch(myUrl))
    {
      await launch(myUrl);
    } else {
      throw 'Could not launch $myUrl';
    }
  }

Answer 4

You can open the link in the native browser app, Google for Android and Safari for iOS, with the flutter_custom_tabs plugin.

To install it, you'd need to add the following line below dependencies: in your pubspec.yaml:

flutter_custom_tabs: "^0.6.0"

And use a function like the following:

void _launchURL(BuildContext context, String url) async {
    try {
      await launch(
        url,
          extraCustomTabs: <String>[
            'org.mozilla.firefox',
            'com.microsoft.emmx',
          ],        
        ),
      );
    } catch (e) {
      debugPrint(e.toString());
    }
}