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

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 :

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 2

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

Answer 4

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.

Answer 5

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.

Answer 6

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