If you want the users of your Flutter application to be able to open URLs from the application, Flutter already provides an easy way for you to create such action. Their official url_launcher package can be used to open URLs in both Android and iOS platforms. You can also control whether the URLs should be opened in a web browser, Safari View Controller (for iOS), or WebView (for Android).
Opening URL in Browser Using url_launcher
Adding Dependencies
First, you need to add the following dependency to the dependencies section of your pubspec.yaml.
dependencies:
url_launcher: ^5.4.11Basic Usage
First of all, you need to import the package.
import 'package:url_launcher/url_launcher.dart';For launching to URL in a browser, below is the method you need to call.
Future launch(
String urlString, {
bool forceSafariVC,
bool forceWebView,
bool enableJavaScript,
bool enableDomStorage,
bool universalLinksOnly,
Map<String, String> headers,
Brightness statusBarBrightness,
})Calling the method is very simple. You are only required to pass the URL which is the only required parameter. All named parameters are optional.
final url = 'https://www.woolha.com';
await launch(url);However, the URL may be invalid and cannot be launched. Therefore, it's better to call canLaunch method first before calling launch method.
final url = 'https://www.woolha.com';
if (await canLaunch(url)) {
await launch(url);
} else {
print('Unable to open URL $url');
}Encoding URL
What if the URL contains certain characters such 'space' ( ) or 'and' (&). The passed URL must be encoded, like the following:
http://www.woolha.com/?name=Woolha+dot+com&about=Flutter+DartFortunately, Flutter provides an easy way to create an encoded URL.
final Uri uri = Uri(
scheme: 'http',
path: 'www.woolha.com',
queryParameters: {
'name': 'Woolha dot com',
'about': 'Flutter Dart'
}
);Opening URL in WebView
In Android, the URLs will be opened in a browser by default. You change that behavior to open the URLs in a WebView instead by setting forceWebView parameter to true. However, JavaScript is not enabled by default unless you set enableJavaScript to true. As does enableDomStorage in which you need to set enableDomStorage to true.
await launch(
url,
forceWebView: true,
enableJavaScript: true,
enableDomStorage: true,
);Opening URL in Safari View Controller
On devices running iOS 9.0 or higher, you can set forceSafariVC to true to make the URL opened in Safari View Controller. If set to false, the URL is opened in the default browser. If unset, it opens web URLs in the Safari View Controller, anything else is opened using the default handler.
await launch(
url,
forceSafariVC: true,
);
Another iOS specific parameter is universalLinksOnly which only applies for iOS 10 or higher when forceSafariVC is set to false. By default, it will launch the url in a browser if it's not a universal link, or launch the respective native app content if the url is a universal link. When set to true, the launcher will only launch the content if the url is a universal link and the respective application is installed. If the value is true and the URL is not a universal link or the respecitve application is not installed, it will throw PlatformException.
await launch(
url,
forceSafariVC: false,
universalLinksOnly: true,
);
In iOS, you can also set the brightness of the status bar of the application after opening a URL by setting statusBarBrightness. The available values are Brigthness.dark and Brightness.light.
await launch(
url,
statusBarBrightness: Brigthness.dark,
);
Full Code
Below is the full code for this tutorial that opens the URL in a browser.
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Woolha.com Flutter Tutorial',
home: _SizedBoxExample(),
);
}
}
class _SizedBoxExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Woolha.com Flutter Tutorial'),
),
body: Center(
child: RaisedButton(
onPressed: _launchURL,
child: Text('Open woolha.com'),
),
),
);
}
}
_launchURL() async {
final Uri uri = Uri(
scheme: 'https',
path: 'www.woolha.com',
queryParameters: {
'name': 'Woolha dot com',
'about': 'Flutter Dart'
},
);
if (await canLaunch(url)) {
await launch(uri.toString());
} else {
print('Could not launch $url');
}
}Parameters
String urlString: The URL to be opened.bool forceSafariVC: For iOS >= 9.0 only. When unset, it opens web URLs in the Safari View Controller, anything else is opened using the default handler. If set totrue, it opens the URL in the Safari View Controller. If set tofalse, the URL is launched in the default browser.bool forceWebView: For Android only. If set totrue, the URL is launched in a WebView. Otherwise, the URL is launched in the default browser..bool enableJavaScript: Whether JavaScript should be enabled in WebView.bool enableDomStorage: Whether DOM storage should be enabled in WebView.bool universalLinksOnly: For iOS >= 10.0 only, only whenforceSafariVCis set tofalse. By default it will launch the url in a browser if it's not a universal link, or launch the respective native app content if the url is a universal link. When set to true, the launcher will only launch the content if the url is a universal link and the respective application is installed. If not, it will throwPlatformException.Map<String, String> headers: Headers to be sent.Brightness statusBarBrightness: yyy.
