I have the following screen and when clicking on the first image it is supposed to open the youtube app with the video that the link is for.

But when I click the button it does not open the youtube app but throws the following log on the console.

E/flutter (29668): [ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: Could not launch youtu.be/ldFhZOXVR2g
E/flutter (29668): #0      _FreeListScreen.build.<anonymous closure> (package:reema_swad_cooking_class/freelist.dart:34:19)
E/flutter (29668): <asynchronous suspension>
E/flutter (29668):

Following is the code that I am using for the app.

import 'package:reema_swad_cooking_class/bottomnavigationbar.dart';
import 'package:url_launcher/url_launcher.dart';
import 'package:flutter/material.dart';
import 'appbar.dart';

class FreeListScreen extends StatefulWidget {
  const FreeListScreen({super.key});

  @override
  State<StatefulWidget> createState() => _FreeListScreen();
}

class _FreeListScreen extends State<FreeListScreen> {
  String getCourseIdFromImageName(String imageName) {
    String courseId = imageName.replaceAll(RegExp(r'[^0-9]'), '');
    return courseId;
  }

  @override
  Widget build(BuildContext) {
    return Scaffold(
      appBar: CustomAppBar(),
      bottomNavigationBar: CustomBottomNavigationBar(),
      body: SingleChildScrollView(
        child: Column(
          children: [
            GestureDetector(
              onTap: () async {
                const youtubelink =
                    "https://www.youtube.com/watch?v=ldFhZOXVR2g&t=17s";
                final Uri youtubeUri = Uri.parse(youtubelink);
                if (await canLaunchUrl(youtubeUri)) {
                  await launchUrl(youtubeUri);
                } else {
                  throw 'Could not launch $youtubelink';
                }
              },
              child: Card(
                elevation: 4,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(20),
                ),
                margin: const EdgeInsets.all(15),
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(12),
                  child: SizedBox(
                    height: 200,
                    width: double.infinity,
                    child: Image.network(
                      "",
                      errorBuilder: (context, error, stackTrace) {
                        return Text('Error loading image: ${error.toString()}');
                      },
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
              ),
            ),
            GestureDetector(
              onTap: () {},
              child: Card(
                elevation: 4,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(20),
                ),
                margin: const EdgeInsets.all(15),
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(12),
                  child: SizedBox(
                    height: 200,
                    width: double.infinity,
                    child: Image.network(
                      "",
                      errorBuilder: (context, error, stackTrace) {
                        return Text('Error loading image: ${error.toString()}');
                      },
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

This problem is happening if I am running the apk on my mobile, but if I run the app on my system for debugging on chrome, the youtube link works and a new page is opened with the youtube website.
Why is this happening and What can I do to solve this error?