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

Article by: Manish Methani

Last Updated: 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.

Watch Video Tutorials at Codzify YouTube Channel:

Codzify Logo

Terms and Conditions    Cookie Policy   Refund Policy   Adsense Disclaimer

Contact: teamcodzify@gmail.com