How to Create a URL Launcher App in Flutter: Open YouTube Videos with Ease?

June 19, 2024 at 5:06pm IST. 3 min 6 sec read

Step 1: Set Up Your Flutter Environment

Ensure you have Flutter installed on your machine. If not, follow the installation guide on the official Flutter website.

Step 2: Create a New Flutter Project

Open your terminal or command prompt, navigate to your desired directory, and create a new Flutter project:

flutter create url_launcher_demo

Navigate into your project directory:

cd url_launcher_demo

Step 3: Add `url_launcher` Dependency

Open the pubspec.yaml file in your Flutter project and add the url_launcher dependency:

dependencies:
  flutter:
    sdk: flutter
  url_launcher: ^6.3.0

Run flutter pub get to install the new dependency:

flutter pub get

Step 4: Modify the Main Dart File

Open the lib/main.dart file and replace its contents with the following code:

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

void main() {
  runApp(UrlLauncherDemo());
}

class UrlLauncherDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Flutter URL Launcher Demo"),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: _launchURL,
            child: Text("Open YouTube Video"),
          ),
        ),
      ),
    );
  }

  
Future _launchUrl() async {
  final Uri _url = Uri.parse("https://www.youtube.com/watch?v=-GSO9cIMp5Y"); // Replace with your YouTube video URL

  if (!await launchUrl(_url)) {
    throw Exception("Could not launch $_url");
  }
}
}

Step 5: Update Android Configuration

For Android, you need to ensure that you have the appropriate permissions. Open android/app/src/main/AndroidManifest.xml and ensure it contains the following permissions within the <manifest> tag:

<uses-permission android:name="android.permission.INTERNET"/>

Step 6: Update iOS Configuration

For iOS, you need to update the Info.plist file. Open ios/Runner/Info.plist and add the following lines inside the <dict> tag:

<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>

Step 7: Run the App

Now that everything is set up, you can run your app using the following command:

flutter run

This will start the app on an available emulator or connected device.

How the App Works

UrlLauncherDemo Widget: This stateless widget contains a Scaffold with an AppBar and a Centered ElevatedButton.
_launchURL Method: This method uses the url_launcher package to launch the specified URL in the default web browser.
main Function: This function starts the Flutter app by running the UrlLauncherDemo widget.

Conclusion

You have now created a simple Flutter app that opens a YouTube video using the url_launcher package. By following these steps, you can easily extend this functionality to open other URLs or handle other types of links within your Flutter applications.