How do I open a web browser (URL) from my Flutter code?

Question

I am building a Flutter app, and I'd like to open a URL into a web browser or browser window (in response to a button tap). How can I do this?

Solution 1

TL;DR

This is now implemented as Plugin

const url = "https://flutter.io";
if (await canLaunch(url))
  await launch(url);
else 
  // can't launch url, there is some error
  throw "Could not launch $url";

---

Full example:

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

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

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

In pubspec.yaml

dependencies:
  url_launcher: ^5.7.10

Special Characters:

If the url value contains spaces or other values that are now allowed in URLs, use

Uri.encodeFull(urlString) or Uri.encodeComponent(urlString) and pass the resulting value instead.

Solution 2

If you target sdk 30 or above canLaunch will return false by default due to package visibility changes: https://developer.android.com/training/basics/intents/package-visibility

in the androidManifest.xml you'll need to add the following directly under <manifest>:

<queries>
    <intent>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data android:scheme="https" />
    </intent>
</queries>

Then the following should word

const url = "https://flutter.io";
if (await canLaunch(url)){
    await launch(url);
} else {
    // can't launch url
}

Solution 3

Using the URL Launcher plugin url_launcher

To launching a web page, Let’s to be an async function and do the following:

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

If we wanted both iOS and Android to open the web page inside the application (as a WebView), then add forceWebView: true we’d do something like this:

 launchURL(String url) async {
    if (await canLaunch(url)) {
      await launch(url, forceWebView: true);
    } else {
      throw 'Could not launch $url';
    }
 }
   

And call it this way

onTap: () {
    const url = 'https://google.com';
    launchURL(url);
}

Solution 4

For Flutter:

As described above by Günter Zöchbauer

For Flutter Web:

import 'dart:html' as html;

Then use:

html.window.open(url, name);

Make sure that you run flutter clean if the import doesn't resolve.

Solution 5

For those who wants to implement LAUNCH BROWSER AND EXIT APP by using url_launcher. Remember to use (forceSafariVC: false) to open the url in default browser of the phone. Otherwise, the launched browser exit along with your APP.

await launch(URL, forceSafariVC: false);

View more solutions

Comments

[SLWS]

gist.github.com/chinmaygarde/d778498418e30825d687147b79d070e‌​b This may help.

[GhostCat]

So you just figured: that link there is broken; so lets put up another answer that only contains a link?

[GhostCat]

Whilst this may theoretically answer the question, it would be preferable to include the essential parts of the answer here, and provide the link for reference.

[david.mihola]

Note that you might need to either create a new flutter project and copy over your Flutter specific stuff (lib, pubspec.yaml, etc.) or conversely update the platform specific folders in your old project for this to work.

[hbhakhra]

Note: Don't forget to add url_launcher: ^3.0.2 to the pubspec.yaml

[Günter Zöchbauer]

What do you mean with "added to existing apps"? Perhaps your files in android/ or ios/ are outdated. If it works in a new app then compare the files and update them in your project. You can also delete these directories and run flutter create . and then re-apply manual changes.

[Pratik Butani]

@hbhakhra Now url_launcher: ^5.0.2 Keep checking.

[bianca]

How to open link for flutter_web where url_launcher plug-in is not available ?

[Günter Zöchbauer]

Why would it not be available? You can write the code yourself. The urllauncher plugin is open source and you can check out its source and learn what it does. You can do the same in your applications code.

[Istiaque Ahmed]

@GünterZöchbauer, may I ask you to have a look at a Flutter related question here : stackoverflow.com/questions/60565658/… ?

[Luis Cabrera Benito]

If you get Unhandled Exception: MissingPluginException just stop the app and then run it again

[Alan Steiman]

This works fine, the problem is that when I try to open a Facebook Messenger url, it is redirecting to intent:// and fails with ERR_UNKNOWN_URL_SCHEME

[Günter Zöchbauer]

Only Android knows about that scheme. You'd need to call into Android (create a plugin in Java) to resolve the URL there and load the content from it, and then pass it back to Flutter. That's not a simple task. What exactly is the original URL for?

[Mano Haran]

Is it possible to close the app after the URL is launched? I tried it with exit(0) but it also closes the browser.

[Pai-Hsiang Huang]

@ManoHaran You can use forceSafariVC to open URL in default browser of the phone: await launch(URL, forceSafariVC: false);

[Touré Holder]

The url_launcher package supports web now

[Lee Probert]

This is what I need as I have to launch a Firebase Dynamic Link from a QR code scanner that is provided in the app. I need the URL to launch externally so it is then recognised as a dynamic link in the app and handled appropriately.

[Apoorv pandey]

Can you describe exactly where to place the <queries> portion in XML file?

[Andrew]

It should be directly under <manifest> so at the same level as things like <uses-permissions> and <application>

[Sachin]

is it possible to open Chrome in desktop mode in mobile?