FutureBuilder in Flutter Unable to Display Video in Flutter Youtube Player only Audio is working

Question

I am facing an issue with the Flutter Youtube Player (youtube_player_flutter version 8.1.2). I am trying to play a YouTube video using the provided code snippet, but I can only hear the audio, and the video is not being displayed.

So when I play the video on its own with the FutureBuilder it works perfectly fine. But because I want to add several videos under the future builder I only hear the audio but no video displayed.

I tried adding a unique key for each video but it works only when I remove the code or add it after loading

FutureBuilder<List<Certain_Model>>(
future: futureExercises,
builder: (BuildContext context, AsyncSnapshot<List<Certain_Model>> snapshot) {
if (snapshot.hasData) {
return Column(
children: List.generate(snapshot.data!.length, (int index) {
String Name = snapshot.data![index].name;
String videoUrl = "youtube video url";
String? videoId = YoutubePlayer.convertUrlToId(videoUrl);

return Column(
  children: [
    if (videoId != null)
      YoutubePlayer(
       // key: ValueKey<String>('video_player_$videoId'),
        controller: YoutubePlayerController(
          initialVideoId: videoId,
          flags: YoutubePlayerFlags(
            autoPlay: false,
            mute: false,
            disableDragSeek: true,
            loop: false,
            enableCaption: false,
          ),
        ),
        showVideoProgressIndicator: true,
        bottomActions: [
          CurrentPosition(),
          ProgressBar(isExpanded: true),
          RemainingDuration(),
        ],
        onReady: () {
        },
      ),
  ],
);

I have already included the required internet permission in the AndroidManifest.xml file:

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

Any assistance or insights into resolving this issue would be greatly appreciated. Thank you!