Flutter: Web view application only a particular website run in the application, others open in local browser of phone

Question

I have a web view application in Flutter. The plugin/package is "flutter_webview_plugin". In Webview Scaffold, I have url= 'www.google.com'. Now I want that any URL which doesn't contain "google.com" opens in the local browser of the phone.

Maybe if I can restrict the Web view plugin if URL doesn't contain "google.com"

Please let me know how can I achieve this.

Here is my code:

 WebviewScaffold(
    url: "http://www.google.com")

Further Clarification (as requested by Günter Zöchbauer): I have a web view application. So the website that I have, has a lot of links in it. I don't want links other than my domain links to load in webview app. I want it to open externally.

Solution

To launch an URL in an external browser use the https://pub.dartlang.org/packages/url_launcher package.

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://flutter.io';
  if (await canLaunch(url)) {
    await launch(url);
  } else {
    throw 'Could not launch $url';
  }
}

You just need to check the URL content and call _launchURL or show the inline webview.

Update (according to the comment below)

https://github.com/flutter/plugins/pull/1323 (for iOS) and https://github.com/flutter/plugins/pull/1236 (Android) added the ability to specify navigation delegates.

https://github.com/amirh/plugins/blob/ad309267f50f924f9e4620f2126e72a2686c88a0/packages/webview_flutter/example/lib/main.dart#L56-L60 shows an example

    return WebView(
      ...
      navigationDelegate: (NavigationRequest request) {
        if (request.url.startsWith('https://www.youtube.com/')) {
          print('blocking navigation to $request}');
          return NavigationDecision.prevent;
        }
        print('allowing navigation to $request');
        return NavigationDecision.navigate;
      },

Comments

[Aman Kataria]

I don't think you have answered my question. I have a web view application. So the website that i have, has a lot of links in it. I don't want links other than my domain links to load in webview app. I want it to open externally.

[Günter Zöchbauer]

You could have made that more clear in your question. You still should because when I delete my answer others will likely also be confused.

[Günter Zöchbauer]

I updated my answer. The changes for iOS were only merged 4 days ago. Ensure you are using the latest version 0.3.4.

[Aman Kataria]

How exactly can i implement the solution in "flutter_webview_plugin" package? Or should I not use this plugin?

[Günter Zöchbauer]

I see. I don't know if that package supports anything like that. My answer is about pub.dartlang.org/packages/webview_flutter. I'd suggest to create an issue in the plugin repo with a link to this question.