Explore Open URLs In Flutter
While surfing the net, each user will go over numerous buttons, text, and so forth, that would divert the user to an alternate website page in a similar tab or an alternate tab when clicked. Now and then, we might need to divert users to explicit links or websites by inciting a browser.
In this article, we will Explore Open URLs In Flutter. We will implement a demo program of the URL and how to open URLs in browser and app using the url_launcher package in your flutter applications.
url_launcher | Flutter Package
A Flutter plugin for launching a URL. Supports iOS, Android, web, Windows, macOS, and Linux. To use this plugin, add…pub.dev
Table Of Contents::
Introduction:
In Flutter, everything is a widget and similarly, Flutter likewise utilizes a lot of plugins or dependencies to make the application work quicker and simpler. For this situation, the “url_launcher” plugin can be utilized to dispatch the URL in a mobile application.
Similarly, when a developer interfaces a URL to a button or text in an application, the application will open the website when clicked in the accompanying manners:
- In browser(default)
- In-App
With regards to opening a website in a browser then it includes two applications at work. One of the applications that the user is utilizing and the other is the browser. Yet, with regards to, in-application opening, it includes only one application. Every one of these highlights can be utilized by a developer as indicated by the need of the user.
Demo Module :
This demo video shows how to open a url’s in a flutter. It shows how the URLs will work using the url_launcher package in your flutter applications. It shows open URLs in the external browser and In-app. It will be shown on your device.
Implementation:
Step 1: Add the dependencies
Add dependencies to pubspec — yaml file.
url_launcher:
Step 2: Import
import 'package:url_launcher/url_launcher.dart';
Step 3: Run flutter packages get in the root directory of your app.
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called main.dart inside the lib folder.
Presently, how about we make a function that can be called at whatever point the user clicks a button that is connected to a URL, to open it in a browser.
_launchURLBrowser() async {
const url = 'https://flutterdevs.com/';
if (await canLaunch(url)) {
await launch(url);
} else {
throw 'Could not launch $url';
}
}
The function is named here as “_launchURLBrowser” and the function is proclaimed as “async” so it returns a guarantee. The “url” variable is allowed with the necessary web address, as a string. It is pronounced as a “const” with the goal that the variable isn’t changed in any situation. On the off chance that there is the possibility to dispatch the URL, just the url is launch by calling the launch() work with url variable as a trait. Else, it will throw/print a text with the URLs value, as a blunder message.
Presently, how about we make a function that can be called at whatever point the user clicks a button that is connected to a URL, to open it in a app.
_launchURLApp() async {
const url = 'https://flutterdevs.com/';
if (await canLaunch(url)) {
await launch(url, forceSafariVC: true, forceWebView: true);
} else {
throw 'Could not launch $url';
}
}
The function is named here as “_launchURLApp” and the function is proclaimed as “async” so it returns a guarantee. The “url” variable is doled out with the necessary web address, as a string. It is pronounced as a “const” so the variable isn’t changed at any condition. On the off chance that there is plausible to dispatch the URL, just the url is launched by calling the launch() function with url variable as a property. Else, it will throw/print a text with the url value, as an error message.
To open the URL inside the application, two conditions must be made valid.
- > forceWebView: true — this helps the app start the app’s web view for the website to open inside the app itself.
- > forceSafariVC: true — in iOS devices, this helps the app to open the website in the Safari View Controller other than the default browser.
Note: In browser opening, the forceWebView and forceSafariVC are set to “false” by default.
The above functions can be called whenever needed in code, by calling the name of the functions as such. In the body, we will create two raised buttons having the text “Press Url Browser” and “Press Url App” on it, respectively.
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// ignore: deprecated_member_use
RaisedButton(
color: Colors.teal,
onPressed: _launchURLBrowser,
child: Text('Press Url Browser',style: TextStyle(color: Colors.white),),
),
SizedBox(height: 8,),
// ignore: deprecated_member_use
RaisedButton(
color: Colors.teal,
onPressed: _launchURLApp,
padding: EdgeInsets.only(left: 30,right: 30),
child: Text('Press Url App',style: TextStyle(color: Colors.white),),
),
],
),
For the onPressed attribute, we are calling _launchURLBrowser and _launchURLApp individually so that, when the first button is pressed the URL is opened in a browser, and when the second button is pressed the URL is opened in the actual application. When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'package:flutter/material.dart';
import 'package:flutter_url/splash_screen.dart';
import 'package:url_launcher/url_launcher.dart';
void main() => runApp(App());
class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Splash(),
);
}
}
class OpenUrlDemo extends StatelessWidget {
_launchURLBrowser() async {
const url = 'https://flutterdevs.com/';
if (await canLaunch(url)) {
await launch(url);
} else {
throw 'Could not launch $url';
}
}
_launchURLApp() async {
const url = 'https://flutterdevs.com/';
if (await canLaunch(url)) {
await launch(url, forceSafariVC: true, forceWebView: true);
} else {
throw 'Could not launch $url';
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey[200],
appBar: AppBar(
automaticallyImplyLeading: false,
backgroundColor: Colors.black,
title: Text('Flutter Open Url Demo')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// ignore: deprecated_member_use
RaisedButton(
color: Colors.teal,
onPressed: _launchURLBrowser,
child: Text('Press Url Browser',style: TextStyle(color: Colors.white),),
),
SizedBox(height: 8,),
// ignore: deprecated_member_use
RaisedButton(
color: Colors.teal,
onPressed: _launchURLApp,
padding: EdgeInsets.only(left: 30,right: 30),
child: Text('Press Url App',style: TextStyle(color: Colors.white),),
),
],
),
),
);
}
}
Conclusion:
In the article, I have explained the Open URLs’ basic structure in a flutter; you can modify this code according to your choice. This was a small introduction to Open URLs On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information on Trying up the Open URLs in your flutter projects. We will show you what the Introduction is?. Make a demo program for working Open URLs and it shows open URLs in the external browser and In-app itself using the url_launcher package in your flutter applications. So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
