URLs in Flutter (original) (raw)

Last Updated : 15 Jul, 2025

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:

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:

Dart `

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 .

XML `

`

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.

Dart `

_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:

**- 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 { 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:

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 `

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:

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: