URLs in Flutter

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:

•  In browser(default)
•  In-App

When it comes to opening a website in a browser, it involves two apps at work. One of the apps 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 the Flutter

Step 1 : Create a new flutter application

Create a new Flutter application using the command Prompt. For creating a new app, write flutter create YOUR_APP_NAME and run this command.

flutter create Progress_flutter

To know more about it refer this article: Creating a Simple Application in Flutter

Step 2 : Adding the Dependency

To add the dependency to the pubspec.yaml file, add url_launcher as a dependency in the dependencies part of the pubspec.yaml file as shown below:

dependencies:
  flutter:
    sdk: flutter
  url_launcher: ^6.3.1

Now run the below command in terminal.

flutter pub get

Step 3 : Importing the Dependency

Use the below line of code in the main.dart file, to import the shimmer dependency :

import 'package:url_launcher/url_launcher.dart';

Step 4 : Add Permissions

add below permissions in AndroidManifest.xml file located in android > app > src > main > AndroidManifest.xml .

<queries>
    <!-- If your app checks for SMS support -->
    <intent>
        <action android:name="android.intent.action.VIEW" />
        <data android:scheme="sms" />
    </intent>
    <!-- If your app checks for call support -->
    <intent>
        <action android:name="android.intent.action.VIEW" />
        <data android:scheme="tel" />
    </intent>
    <!-- If your application checks for inAppBrowserView launch mode support -->
    <intent>
        <action android:name="android.support.customtabs.action.CustomTabsService" />
    </intent>
</queries>

Step 5 : Specify Type of View

- 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. 

_launchURLBrowser() async {
  var _url = Uri.parse("https://www.geeksforgeeks.org/");
  if (!await launchUrl(_url, mode: LaunchMode.externalApplication)) {
              throw Exception('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.
• The mode: LauchMode.externalApplication is deciding factor of type of view, here externalApplication means webview.
•  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.

_launchURLApp() async {
      var _url = Uri.parse("https://www.geeksforgeeks.org/");
      if (!await launchUrl(_url, mode: LaunchMode.inAppWebView)) {
                  throw Exception('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.
• The mode: LauchMode.inAppWebView is deciding factor of type of view, here inAppWebView means Appview.
• Else, it will throw/print a text with the url value, as an error message.

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:

 ElevatedButton(
      onPressed: _launchURLBrowser,
      style: ButtonStyle(
            backgroundColor: WidgetStateProperty.all(Colors.green),
            foregroundColor: WidgetStateProperty.all(Colors.white),
      ),
      child: const Text('Open in Browser'),
),
ElevatedButton(
      onPressed: _launchURLApp,
      style: ButtonStyle(
            backgroundColor: WidgetStateProperty.all(Colors.green),
            foregroundColor: WidgetStateProperty.all(Colors.white),
      ),
      child: const 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

main.dart:

import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';

// Function to trigger the build process
void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}

// Function to launch URL in the browser
_launchURLBrowser() async {
  var _url = Uri.parse("https://www.geeksforgeeks.org/");
  if (!await launchUrl(_url, mode: LaunchMode.externalApplication)) {
              throw Exception('Could not launch $_url');
      }
}

// Function to launch URL in the app
_launchURLApp() async {
  var _url = Uri.parse("https://www.geeksforgeeks.org/");
  if (!await launchUrl(_url, mode: LaunchMode.inAppWebView)) {
              throw Exception('Could not launch $_url');
      }
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Geeks for Geeks'),
          backgroundColor: Colors.green,
          foregroundColor: Colors.white,
        ),
        body: SafeArea(
          child: Center(
            child: Column(
              children: [
                Container(
                  height: 250.0,
                ),
                const Text(
                  'Welcome to GFG!',
                  style: TextStyle(
                    fontSize: 30.0,
                    color: Colors.green,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                Container(
                  height: 20.0,
                ),
                ElevatedButton(
                  onPressed: _launchURLBrowser,
                  style: ButtonStyle(
                    backgroundColor: WidgetStateProperty.all(Colors.green),
                    foregroundColor: WidgetStateProperty.all(Colors.white),
                  ),
                  child: const Text('Open in Browser'),
                ),
                Container(
                  height: 20.0,
                ),
                ElevatedButton(
                  onPressed: _launchURLApp,
                  style: ButtonStyle(
                    backgroundColor: WidgetStateProperty.all(Colors.green),
                    foregroundColor: WidgetStateProperty.all(Colors.white),
                  ),
                  child: const Text('Open in App'),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Output:

varshaadhanasekar

Follow

Improve

Article Tags :

• Dart
• Flutter
• Android
• Flutter Class