Skip to content
Related Articles

Related Articles

Improve Article

URLs in Flutter

  • Last Updated : 10 Sep, 2020

While surfing the net, every user will come across many buttons, text, etc., that would redirect the user to a different webpage in the same tab or in a different tab when clicked. In the same way, when a developer links a URL to a button or text in an app, the app will open the website when clicked in the following ways:

  1.  In browser(default)
  2.  In App

When it comes to opening a website in a browser then it involves two apps at work. One of the app that the user is using and the other is the browser. But, when it comes to, in-app opening, it involves only one app. Each of these features can be used by a developer according to the need of the user.

URLs in Flutter:

In Flutter, everything is a widget and in the same way, Flutter also uses a lot of plugins or dependencies in order to make the app work faster and easier. In this case, the “url_launcher” plugin can be used to launch the URL in a mobile application.

Steps for adding the plugin to Flutter app is as follows:

Step 1: Open “pubspec.yaml” file from the project folder.

pubspec.yam

pubspec.yaml

Step 2: In the pubspec.yaml file, type “url_launcher:” under dependencies.



The code looks like this:

Dart




dependencies:
  flutter:
    sdk: flutter
  url_launcher:

Step 3: Now click “Pub Get” button in the top of the application (Android Studio).

Step 4: The “Process finished with exit code 0“ in the console shows that the dependency is been added successfully.

Step 5: Now import the plugin or package by adding the “import ‘package:url_launcher/url_launcher.dart’;” code to the top of the “main.dart” file.

URLs in Browser:

Now, let’s create a function that can be called whenever the user clicks a button that’s linked to a URL, to open it in a browser. 

Dart




_launchURLBrowser() async {
  if (await canLaunch(url)) {
    await launch(url);
  } else {
    throw 'Could not launch $url';
  }
}

This is what we did in the above function:



  • The function is named here as “_launchURLBrowser” and the function is declared as “async”, so that it returns a promise.
  • The “url” variable is assigned with the required web address, as a string. It is declared as a “const”, so that the variable is not changed at any circumstance.
  •  If there is a possibility to launch the URL, only then the url is launched by calling the launch() function with url variable as an attribute.
  •  Else, it will throw/print a text with the URLs value, as an error message.

URLs in App:

Now, let’s create a function that can be called whenever the user clicks a button that’s linked to a URL, to open it in the app.

Dart




_launchURLApp() async {
  if (await canLaunch(url)) {
    await launch(url, forceSafariVC: true, forceWebView: true);
  } else {
    throw 'Could not launch $url';
  }
}

This is what we did in the above function:

  • The function is named here as “_launchURLApp” and the function is declared as “async”, so that it returns a promise.
  • The “url” variable is assigned with the required web address, as a string. It is declared as a “const”, so that the variable is not changed at any circumstance.
  • If there is a possibility to launch the URL, only then the url is launched by calling the launch() function with url variable as an attribute.

In order to open the URL inside the app, two conditions have to be made true.

  1.  forceWebView: true — this helps the app to start the web view of the app for the website to open inside the app itself.
  2. forceSafariVC: true — in iOS devices, this helps the app to open the website in the Safari View Controller other than the default browser.
  • 5) Else, it will throw/print a text with the url value, as an error message.

Note: In browser opening, the forceWebView and forceSafariVC are set to “false” by default.

Calling the functions:

The above functions can be called whenever needed in code, by calling the name of the functions as such. The examples are as follows:

Dart




RaisedButton(
  onPressed: _launchURLBrowser,
  child: Text('Open in Browser'),
),
RaisedButton(
  onPressed: _launchURLApp,
  child: Text('Open in App'),
),

In the above code block we did two things:

  1. This creates two raised buttons having the text “Open in Browser” and “Open in App” on it, respectively.
  2.  For the onPressed attribute, we are calling _launchURLBrowser and _launchURLApp respectively 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 app itself.

Complete Source Code:

Dart




import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:url_launcher/url_launcher.dart';
  
void main() => runApp(MyApp());
  
_launchURLBrowser() async {
  if (await canLaunch(url)) {
    await launch(url);
  } else {
    throw 'Could not launch $url';
  }
}
  
_launchURLApp() async {
  if (await canLaunch(url)) {
    await launch(url, forceSafariVC: true, forceWebView: true);
  } else {
    throw 'Could not launch $url';
  }
}
  
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Geeks for Geeks'),
          backgroundColor: Colors.green,
        ),
        body: SafeArea(
          child: Center(
            child: Column(
              children: [
                Container(
                  height: 250.0,
                ),
                Text(
                  'Welcome to GFG!',
                  style: TextStyle(
                    fontSize: 30.0,
                    color: Colors.green,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                Container(
                  height: 20.0,
                ),
                RaisedButton(
                  onPressed: _launchURLBrowser,
                  child: Text('Open in Browser'),
                  textColor: Colors.black,
                  padding: const EdgeInsets.all(5.0),
                ),
                Container(
                  height: 20.0,
                ),
                RaisedButton(
                  onPressed: _launchURLApp,
                  child: Text('Open in App'),
                  textColor: Colors.black,
                  padding: const EdgeInsets.all(5.0),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Output:

URLs in flutter

Want a more fast-paced & competitive environment to learn the fundamentals of Android?
Click here to head to a guide uniquely curated by our experts with the aim to make you industry ready in no time!



My Personal Notes arrow_drop_up
Recommended Articles
Page :