How to Open External URL in a Flutter Mobile App: Step by Step Guide
Opening external URLs is a common feature in mobile apps. As a Flutter developer, you might have encountered situations where you want to let users open a website or a specific link outside your app. In this post, I’ll walk you through how to do it quickly and easily into your flutter mobile app.
Why Open External URLs?
Sometimes, your app needs to show content that’s better viewed in a browser. For example:
- Directing users to your website or social media page.
- Opening a privacy policy or terms and conditions page.
- Redirecting users to a payment gateway or external service.
- Opening another app like google play subscription manager
- Opening email app for sending email directly
- Opening calling app by clicking on number and go to calling app with the number directly.
- Opening SMS app if you want to open SMS app for sending SMS directly
So, Flutter makes this task super simple with the help of a package called url_launcher
. It is built by flutter itself, and it is now a separate package.
What Is url_launcher
?
The url_launcher
package is a popular Flutter plugin that allows your app to open URLs in the device’s default app (Browser, Email, Message, Phone). It’s lightweight, easy to use, and works on both Android and iOS.
Step-by-Step Guide
Here’s how you can use url_launcher
to open external URLs in your Flutter app.
1. Add the url_launcher
Package
First, include the package in your project by adding it to the pubspec.yaml
file:
dependencies:
url_launcher: ^6.3.1 # Check pub.dev for the latest version
Then, run the command:
flutter pub get
2. Import the Package
In your Dart file, import the package:
import 'package:url_launcher/url_launcher.dart';
3. Configurations
We need to configure for Anroid and IOS for opening external app with the url.
ISO
Add any URL schemes passed to canLaunchUrl
as LSApplicationQueriesSchemes
entries in your Info.plist file, otherwise it will return false.
<key>LSApplicationQueriesSchemes</key>
<array>
<string>sms</string>
</array>
Android
Add following permission for opening url externally. Go to /android/app/main/AndroidManifest.xml
and give following permission.
<queries>
<!-- If your app checks for SMS support -->
<intent>
<action android:name="android.intent.action.VIEW" />
<data android:scheme="sms" />
</intent>
</queries>
3. Create your widget
Create a widget to open the URL. The launchUrl
function handles this:
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return Column(
children: [
//Opening external https url in browser
ElevatedButton(
onPressed: () {
launchUrl(
Uri.parse('https://siamahnaf.com'),
);
},
child: Text('Click me to Open URL'),
),
//For more details options you can watch my video tutorial
],
);
}
}
In this widget, I show you all supported url that can be open on any external app such as browser, phone app, sms app, email app.
Supported URL schemes
The provided URL is passed directly to the host platform for handling. The supported URL schemes therefore depend on the platform and installed apps.
Video Tutorial
Wrapping It Up
Opening external URLs in a Flutter app is straightforward with the url_launcher
package. It’s a reliable way to improve your app’s functionality and user experience. Whether you’re redirecting users to a website, payment gateway, or social media, this method works like a charm.
So, go ahead and give it a try in your next project! Happy coding! 😊
If you have any questions or run into any issues, feel free to ask in the comments below. I’d love to help!