140

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?

Paresh Mangukiya
  • 37,512
  • 17
  • 201
  • 182
Seth Ladd
  • 95,521
  • 62
  • 179
  • 266
  • https://gist.github.com/chinmaygarde/d778498418e30825d687147b79d070eb This may help. – SLWS Mar 31 '17 at 20:24

8 Answers8

243

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.

Günter Zöchbauer
  • 558,509
  • 191
  • 1,911
  • 1,506
  • 2
    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. – david.mihola May 10 '17 at 14:43
  • 4
    Note: Don't forget to add `url_launcher: ^3.0.2` to the pubspec.yaml – hbhakhra Jun 24 '18 at 03:57
  • 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. – Günter Zöchbauer Nov 06 '18 at 08:44
  • @hbhakhra Now [url_launcher: ^5.0.2](https://pub.dartlang.org/packages/url_launcher#-installing-tab-) Keep checking. – Pratik Butani Mar 19 '19 at 16:03
  • 2
    How to open link for flutter_web where url_launcher plug-in is not available ? – bianca Jul 16 '19 at 01:23
  • 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. – Günter Zöchbauer Jul 16 '19 at 03:15
  • @GünterZöchbauer, may I ask you to have a look at a Flutter related question here : https://stackoverflow.com/questions/60565658/fluter-image-picker-package-show-images-one-after-another-with-delete-action ? – Istiaque Ahmed Mar 26 '20 at 20:52
  • If you get Unhandled Exception: MissingPluginException just **stop** the app and then run it again – Luis Cabrera Benito Mar 27 '20 at 04:54
  • 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` – Alan Steiman Jun 18 '20 at 23:42
  • 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? – Günter Zöchbauer Jun 19 '20 at 03:43
  • is it possible to open Chrome in desktop mode in mobile? – Sachin Aug 04 '21 at 11:12
23

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

<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
}
Andrew
  • 6,590
  • 7
  • 45
  • 67
12

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.

Rohan Taneja
  • 7,779
  • 2
  • 27
  • 38
9

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);
Pai-Hsiang Huang
  • 302
  • 3
  • 10
  • 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. – Lee Probert Jun 28 '21 at 21:11
6

The best way is to use url_launcher package .

Add url_launcher as a dependency in your pubspec.yaml file.

dependencies:
  url_launcher: ^5.7.10

An example of how to use it :

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

void main() {
  runApp(
    MaterialApp(
        home: Scaffold(
      appBar: AppBar(title: Text('Flutter is beautiful'),),
      body: Center(
        child: RaisedButton(
          onPressed: _launchURL,
          child: Text('Show Flutter homepage'),
        ),
      ),
    )),
  );
}

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

Output : enter image description here

The launch method takes a string argument containing a URL . By default, Android opens up a browser when handling URLs. You can pass forceWebView: true parameter to tell the plugin to open a WebView instead. If you do this for a URL of a page containing JavaScript, make sure to pass in enableJavaScript: true, or else the launch method will not work properly. On iOS, the default behavior is to open all web URLs within the app. Everything else is redirected to the app handler.

Kab Agouda
  • 4,090
  • 24
  • 24
4

If you want to use url_launcher than please use it in this form

environment:
  sdk: ">=2.1.0 <3.0.0"

dependencies:
  url_launcher: ^5.0.2
  flutter:
    sdk: flutter

This answer is also for absolute beginners: They are thinking behind the flutter sdk. No that was a failure. The packages were extras and not in the flutter Sdk. These were secondary packages (single small framework helpers).

Pavel Smirnov
  • 4,421
  • 3
  • 17
  • 26
edgar wahl
  • 41
  • 2
3

After some search, this issue can be solved via instructions listed here: https://groups.google.com/forum/#!topic/flutter-dev/J3ujgdOuG98

The above UrlLauncher is no longer usable.

TaylorR
  • 3,160
  • 5
  • 24
  • 38
  • So you just figured: that link there is broken; so lets put up *another* answer that only contains a link? – GhostCat May 10 '17 at 10:40
  • Whilst this may theoretically answer the question, [it would be preferable](//meta.stackoverflow.com/q/8259) to include the essential parts of the answer here, and provide the link for reference. – GhostCat May 10 '17 at 10:40
0

Use url_launcher package . It will do this for you