Introduction

Hey, fellas today we are going to see how we can add a YouTube player to our flutter app. Sometimes we just want to show some tailor or a demo video from Youtube in our some apps for example when you making an app for cooks or the movie review app.

The first thing that we need is to, add the youtube_player_flutter plugin to your pubspecp.yaml file. And please do check the latest version by clicking on the attached link.

youtube_player_flutter: ^7.0.0+7

Once added, click on pub get or run the command flutter pub get from the terminal.

Let's code

First of all, add the YoutubePlayer widget to display video.

YoutubePlayer(
    controller: _controller,
    showVideoProgressIndicator: true,
    videoProgressIndicatorColor: Colors.amber,
    progressColors: ProgressColors(
        playedColor: Colors.amber,
        handleColor: Colors.amberAccent,
    ),
    onReady () {
        _controller.addListener(listener);
    },
),

• showVideoProgressIndicator — Set to true to display a progress bar at the time of buffering.
• progressIndicatorColor — To set progress bar color as per matching with app’s theme.
• controller — used to display custom controllers and also provide methods to add controls.

YoutubePlayerController _controller = YoutubePlayerController(
    initialVideoId: 'iLnmTe5Q2Qw',
    flags: YoutubePlayerFlags(
        autoPlay: true,
        mute: true,
        hideControls: true,
  ),
);

• hideControls — To hide the controls while playing the videos. The default value is false which means by default controls will be displayed on the screen. If set to true controls will not be visible.

If you see in the YouTube player controller we have the video id So what we have to do is to extract the video id from the URL.

The plugin also provides convertUrlToId() a method that converts youtube links to their corresponding video ids.

String videoId;
videoId = YoutubePlayer.convertUrlToId("https://www.youtube.com/watch?v=BBAyRBTfsOU");

That's all you need to do to add a youtube player to your app.

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.