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?

Answer 1

TL;DR

This is now implemented as Plugin

 final Uri url = Uri.parse('https://flutter.dev');
 if (!await launchUrl(url)) {
      throw Exception('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 {
   final Uri url = Uri.parse('https://flutter.dev');
   if (!await launchUrl(url)) {
        throw Exception('Could not launch $_url');
    }
}

In pubspec.yaml

dependencies:
  url_launcher: ^6.1.11

Check out the latest url_launcher package.

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.

Answer 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 - for flutter 3 upwards:

const uri = Uri.parse("https://flutter.io");
if (await canLaunchUrl(uri)){
    await launchUrl(uri);
} else {
    // can't launch url
}

or for older versions of flutter use this instead:

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

launchUrl has a mode parameter which can be used to control where the url gets launched.

So, passing in launchUrl(uri, mode: LaunchMode.platformDefault) leaves the decision of how to launch the URL to the platform implementation. But you can also specify

LaunchMode.inAppWebView which will use an in-app web view LaunchMode.externalApplication for it to be handled by an external application

Or LaunchMode.externalNonBrowserApplication to be handled by a non-browser application.

Answer 3

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.

Answer 4

The best way is to use url_launcher package .

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

dependencies:
  url_launcher: 

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 canLaunchUrl(Uri.parse(url))) {
    await launchUrl(Uri.parse(url));
  } else {
    throw 'Could not launch $url';
  }
}

Output :

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.

Answer 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);

Answer 6

This is now implemented as Plugin

    const url = "https://flutter.io";
    final Uri _url = Uri.parse(url);

    await launchUrl(_url,mode: LaunchMode.externalApplication);

 pubspec.yaml 
Add dependencies

dependencies: url_launcher: ^6.0.12

Output

Answer 7

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).

Answer 8

The PLUGIN plugin works great, as you explain in your examples.

import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
final Uri _url = Uri.parse('https://flutter.dev');
void main() => runApp(
  const MaterialApp(
    home: Material(
      child: Center(
        child: ElevatedButton(
          onPressed: launchUrlStart(url: "https://flutter.dev"),
          child: Text('Show Flutter homepage'),
        ),
      ),
    ),
  ),
);

Future<void> launchUrlStart({required String url}) async {
if (!await launchUrl(Uri.parse(url))) {
  throw 'Could not launch $url';
 }
}

But when trying to open PDF https://www.orimi.com/pdf-test.pdf it remained blank, the problem was that the browser handled it in its own way. Therefore the solution was to tell it to open with an external application and it worked as expected.

Future<void> launchUrlStart({required String url}) async {
  if (!await launchUrl(Uri.parse(url),mode: LaunchMode.externalApplication)) {
    throw 'Could not launch $url';
  }
}

In pubspec.yaml

#https://pub.dev/packages/url_launcher
url_launcher: ^6.1.5

Answer 9

using the url_launcher package to do the following:

dependencies:
  url_launcher: ^latest_version


if (await canLaunchUrl(Uri.parse(url))) {
    await launchUrl(Uri.parse(url));
}

Note: Ensure you are trying to open a URI, not a String.