Infinite loading when using youtube_player_flutter

Question

I was using youtube_player_flutter and implemented everything correctly as it was written in it's README.

But still I was facing one issue that whenever I open that page where I want the youtube player to open, it keeps loading and never loads the video.

I've searched about this issue everywhere but didn't get any solution. One of those solutions was that to include internet permission in AndroidManifest.xml:

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

I did this, nothing changed. I also downgraded the package to v6.1.1, someone asked me to do this in github issue, but that also did nothing.

How can I resolve this issue?

Answer 1

I'm answering my own question as I didn't find anything that can resolve this problem when I was searching about this issue.

So, I tried to define the controller in initState() and it worked, and now it's working in v7.0.0+7. This is my code:

class AboutTopic extends StatefulWidget {
  final String videoLink;

  AboutTopic({this.videoLink});

  @override
  _AboutTopicState createState() => _AboutTopicState();
}

class _AboutTopicState extends State<AboutTopic> {
  YoutubePlayerController _controller;

  @override
  void initState() {
     _controller = YoutubePlayerController(
      initialVideoId:
          YoutubePlayer.convertUrlToId(widget.videoLink),
      flags: YoutubePlayerFlags(
          mute: false,
          autoPlay: true,
          disableDragSeek: true,
          loop: false,
          enableCaption: false),
    );

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
       appBar: AppBar(
        title: Text('About'),
        centerTitle: true,
        leading: IconButton(
          icon: Icon(Icons.arrow_back),
          onPressed: () {
            Navigator.of(context).pop();
          },
        )
      ),

      body: YoutubePlayer(
        controller: _controller,
        showVideoProgressIndicator: true,
        bottomActions: <Widget>[
          const SizedBox(width: 14.0),
          CurrentPosition(),
          const SizedBox(width: 8.0),
          ProgressBar(isExpanded: true),
          RemainingDuration(),
        ],
        aspectRatio: 4 / 3,
        progressIndicatorColor: Colors.white,
        onReady: () {
          print('Player is ready.');
        },
      ),
    );
  }
}