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.