Flutter youtube integration tutorial | Youtube Video Stream

Flutter Youtube Integration :

Flutter Youtube video streaming integration is explained in this part of the tutorials we play videos directly from the youtube with the help of a youtube video URL.

Youtube is the highly used video search engine from google almost everyone have experienced the usage and when there is requirement to display videos on mobile app youtube is the best option because it manages all the hassle of storing the video and playing it.

We integrate flutter youtube player and play a video proving the detailed source code of enabling youtube api in google api console.

In this tutorial we will cover a basic integration of youtube such that it can work on both android and iOS devices.

Enable Youtube Api Form Google API Console

 

 

Now from credentials tab get the Api Key and add it to your project

 

For reference visit the tutorial on integration

 

Project Structure :

This image depicts the project structure for usage of flutter youtube integrations in your app.

 

pubspec.yaml :

Add flutter_youtube plugin to pubspec and provide the appropriate version such that there will be now code level issue’s.

dependencies:
  flutter:
    sdk: flutter
  flutter_youtube: ^2.0.0

 

main.dart :

Start initializing with void main() and consider the default class MyApp()

void main() => runApp(new MyApp());

 

Extend your MyApp class with StatefulWidget and create a State

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

 

Add a textEditingController

TextEditingController textEditingControllerUrl = new TextEditingController();

 

Initialize the flutter plugin and add a video url to be played, also add apiKey which you get from Google Console API

FlutterYoutube.playYoutubeVideoByUrl(
  apiKey: "You Api Key Here",
  videoUrl: textEditingControllerUrl.text,
);

 

Add a TextFormField with a prefix icon and suffix icon, controller to fetch the user input video url.

TextFormField(
  controller: textEditingControllerUrl,
  decoration: InputDecoration(
      hintText: 'Youtube url here...',
      filled: true,
      prefixIcon: Icon(
        Icons.video_library,
        color: Colors.red,
        size: 28.0,
      ),
      suffixIcon: IconButton(
          icon: Icon(Icons.play_arrow),
          onPressed: () {
            playYoutubeVideoEdit();
          })),
),

 

Flutter youtube Full Code :

Providing the full source code for flutter youtube integrations in your app.

import 'package:flutter/material.dart';
import 'package:flutter_youtube/flutter_youtube.dart';

void main() => runApp(new MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {

  TextEditingController textEditingControllerUrl = new TextEditingController();

  @override
  initState() {
    super.initState();
  }

  void playYoutubeVideoEdit() {
    FlutterYoutube.playYoutubeVideoByUrl(
      apiKey: "You Api Key Here",
      videoUrl: textEditingControllerUrl.text,
    );
  }

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Youtube Player'),
        ),
        body: Center(
          child: Container(

            margin: EdgeInsets.only(left: 16.0),
            child: TextFormField(
              controller: textEditingControllerUrl,
              decoration: InputDecoration(
                  hintText: 'Youtube url here...',
                  filled: true,
                  prefixIcon: Icon(
                    Icons.video_library,
                    color: Colors.red,
                    size: 28.0,
                  ),
                  suffixIcon: IconButton(
                      icon: Icon(Icons.play_arrow),
                      onPressed: () {
                        playYoutubeVideoEdit();
                      })),
            ),
          ),
        ),
      ),
    );
  }
}

 

Flutter youtube output :

This screen depicts the usage of flutter youtube player on your app.

If you have any query in this tutorial on flutter youtube player integrations do let us know in comment section below.For more interesting tutorials do like, share this tutorial.