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?
- 37,512
- 17
- 201
- 182
- 95,521
- 62
- 179
- 266
-
https://gist.github.com/chinmaygarde/d778498418e30825d687147b79d070eb This may help. – SLWS Mar 31 '17 at 20:24
8 Answers
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.
- 558,509
- 191
- 1,911
- 1,506
-
2Note 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
-
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
-
2How 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
-
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
}
- 6,590
- 7
- 45
- 67
-
3Can you describe exactly where to place the
portion in XML file? – Apoorv pandey Jul 30 '21 at 06:32 -
7
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.
- 7,779
- 2
- 27
- 38
-
The [url_launcher](https://pub.dev/packages/url_launcher) package supports web now – Touré Holder Jun 27 '21 at 14:21
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);
- 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
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';
}
}
The launch method takes a string argument containing a URL . By default, Android opens up a browser when handling URLs. You can pass
forceWebView: trueparameter 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 inenableJavaScript: 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.
- 4,090
- 24
- 24
-
Is it possible to close the app after the URL is launched? I tried it with exit(0) but it also closes the browser. – Mano Haran Feb 01 '21 at 16:35
-
1@ManoHaran You can use forceSafariVC to open URL in default browser of the phone: await launch(URL, forceSafariVC: false); – Pai-Hsiang Huang Mar 25 '21 at 07:50
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).
- 4,421
- 3
- 17
- 26
- 41
- 2
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.
- 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