How to Display Youtube Videos in Flutter App

Hello everyone, welcome back at porkaone. On this occasion we will learn how to display YouTube videos in Flutter. Are you curious? Come on, follow the tutorial below.

Read Another Article ✨

📰 1. How to Display a Website in Flutter with Webview  read more

📰 2. How to Make a Bubble Bottom Bar in Flutter read more

📰 3. How to Install Java Development Kit and Add Variable Path to ENV read more

📰 4. How to Make Copy Feature in Flutter Apps read more

How to Display Youtube Videos in Flutter

1. Create a new project with the name you want. Use the latest flutter version or flutter that supports null safety.

2. Open pubspec.yaml then add youtube_player_flutter: example as in the image below. Save file to download the package.

Download Package

3. Open lib/main.dart then replace it with the script below.

import 'package:flutter/material.dart';
  import 'package:youtube_player_flutter/youtube_player_flutter.dart';
  
  void main() {
    runApp(MyApp());
  }
  
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'YouTube Player',
        home: Scaffold(
          appBar: AppBar(
            title: Text('YouTube Player'),
          ),
          body: Padding(
            padding: const EdgeInsets.only(
              left: 10, 
              right: 10
            ),
            child: Center(
              child: YouTubePlayerWidget(
                videoUrl: 'https://www.youtube.com/watch?v=H9i9qOSQDfA',
              ),
            ),
          ),
        ),
      );
    }
  }
  
  class YouTubePlayerWidget extends StatefulWidget {
    final String videoUrl;
  
    YouTubePlayerWidget({required this.videoUrl});
  
    @override
    _YouTubePlayerWidgetState createState() => _YouTubePlayerWidgetState();
  }
  
  class _YouTubePlayerWidgetState extends State<YouTubePlayerWidget> {
    late YoutubePlayerController _controller;
  
    @override
    void initState() {
      super.initState();
      _controller = YoutubePlayerController(
        initialVideoId: YoutubePlayer.convertUrlToId(widget.videoUrl)!,
        flags: const YoutubePlayerFlags(
          autoPlay: false,
          mute: false,
        ),
      );
    }
  
    @override
    Widget build(BuildContext context) {
      return YoutubePlayer(
        controller: _controller,
        showVideoProgressIndicator: true,
        progressIndicatorColor: Colors.blueAccent,
      );
    }
  }

Explanation:

1. Import package: Import the two required packages, namely flutter/material.dart and youtube_player_flutter/youtube_player_flutter.dart. The flutter/material.dart package is used to import the Flutter UI framework, while youtube_player_flutter/youtube_player_flutter.dart is used to import the youtube_player_flutter package which provides YouTube video player functions and widgets.
2. Main() method: The main() method is used as the main entry point of a Flutter application. In it, we run runApp() with the MyApp() instance as the argument.
3. Class MyApp: This is the main class which is an instance of StatelessWidget. This class implements the build() method which returns a MaterialApp widget. MaterialApp is a basic widget that loads a Flutter application with the title 'YouTube Player'. In it, there is a Scaffold widget which contains the AppBar and body.
4. YouTubePlayerWidget Widget: This is a widget displayed inside Scaffold as a child of the Center widget. This widget accepts videoUrl as a parameter in the constructor. This widget also has a stateful class _YouTubePlayerWidgetState which manages the video playback logic.
5. Class _YouTubePlayerWidgetState: This class is an instance of State and implements the build() method. In the initState() method, we create a YoutubePlayerController instance using the initialVideoId obtained from the video URL using the YoutubePlayer.convertUrlToId() function. Then, we set several flags such as autoPlay and mute using YoutubePlayerFlags. In the build() method, we return the YoutubePlayer widget using the YoutubePlayerController that we initialized previously.

OK, now run the emulator and if successful, it will look like the image below.

Video Player

Easy, right? You can combine this project with the YouTube API to accommodate many videos dynamically. One more addition, this package cannot display videos from platforms or websites other than YouTube. Then you have to use another package.

OK, that's it for this short tutorial on how to display YouTube videos in Flutter. Hopefully this is useful, if anyone has questions, please ask in the comments column below. That's all and receive a salary.