![flutter-logo.jpg](https://cdn.utopian.io/posts/28ef4a1f8c080eb460ec93112e7c099cc6fdflutter-logo.jpg)


#### What Will I Learn?

- You will learn how to play local videos using the video player plugin
- You will learn how to play network videos
- You will learn how to decode YouTube URLs
- You will learn about the state class' deactivate method

#### Requirements
##### System Requirements: 
- [IDEA intellij](https://www.jetbrains.com/idea/), [Visual Studio Code](https://code.visualstudio.com/) with the Dart/Flutter [Plugins](https://github.com/flutter/flutter-intellij), [Android Studio](https://developer.android.com/studio/index.html) or [Xcode](https://developer.apple.com/xcode/) 
- The [Flutter SDK](https://flutter.io/get-started/install/) on the latest Master Build
- An Android or iOS Emulator or device for testing
##### OS Support for Flutter:
- Windows 7 SP1 or later (64-bit)
- macOS (64-bit)
- Linux (64-bit)
#### Required Knowledge
- A basic understanding of Videos and Video Players
- A fair understanding of Imperative or Object Oriented Programming
- An understanding of basic Mobile Development

#### Resources for Flutter and this Project:
- Website: https://flutter.io/
- Flutter Official Documentation: https://flutter.io/docs/
- Flutter Installation Information: https://flutter.io/get-started/install/
- Flutter GitHub repository: https://github.com/flutter/flutter
- Flutter Dart 2 Preview Information: https://github.com/flutter/flutter/wiki/Trying-the-preview-of-Dart-2-in-Flutter
- Flutter Technical Overview: https://flutter.io/technical-overview/
- Dart Website: https://www.dartlang.org/
- Flutter Awesome GitHub Repository: https://github.com/Solido/awesome-flutter  
- YouTube V3 API link deconstructor: https://you-link.herokuapp.com/?url=
- FlutterFire Repository: https://github.com/flutter/plugins 

##### Sources:
- Flutter Logo (Google): https://flutter.io/
- YouTube V3 API link deconstructor: https://you-link.herokuapp.com/?url=
- Butterfly Video used in Tutorial: https://flutter.github.io/assets-for-api-docs/videos/butterfly.mp4

#### Difficulty

- Intermediate


#### Description

This **Video Tutorial** looks at how we can implement and use the **Flutter Video Player** to play multiple types of videos in Flutter.   We also touch on some other minor elements of the flutter framework such as the **deactivate method** for the **State class**.

#### Outline and Overview
##### Outline for this Tutorial

**Playing videos in Flutter** is a fairly popular feature.  Many popular mobile applications make use of video players to good effect and it makes sense that developers would want to be able to implement this type of feature in a cross platform framework like flutter.  The solution to this problem comes in the form of the **Video Player plugin** from the **FlutterFire repository**.   This plugin allows flutter to interface with the **platform's native video players** so that those video players can be embedded into the flutter widget tree. 

##### Item 1: Local Videos
Using **local videos** in a flutter application is just as easy as making use of a **local image, font, or sprite**.  We can specify the path for the asset through our `pubspec.yaml` file and then we can directly call to that path in our application.  The **video player plugin** comes with a special constructor which lets us build out a video player controller specifically geared towards playing local videos.  By invoking this constructor we can directly call the videos just by passing in the **file path** as a string. 

![createVideo.jpg](https://cdn.utopian.io/posts/5b7b0c807a764c76728fcfd64cdda91ed652createVideo.jpg)

Here is the `createVideo` function that we use to setup our **video controller**.  In it you can see the asset constructor in use.  The constructor called `VideoPlayerController.asset` directly calls to the path where our local video is stored. 

##### Item 2: Network and YouTube Videos
A vast majority of mobile applications these days make use of the cloud to minimize their storage footprint.  Not only can we play local videos using the **video player plugin**, we can play **network videos**.  We are able to do this by directly referencing the **URL** for the video in a special network constructor. If a video can be played inside of the normal mobile video player for either **Android or iOS**, then it can also be played inside of the flutter video player.

![video_api.jpg](https://cdn.utopian.io/posts/ec752439623ef1065a3086de7b659685a33avideo_api.jpg)

Due to the way that **YouTube videos** are encoded on the server, we can't directly call to a YouTube video URL.  We can however, use the **YouTube V3 API** to decode these URLs into a format that we can make use of in our application.  The above image shows one such URL.  

##### Item 3: The Deactivate Method

Most widgets have access to many **lifecycle methods** like initial state and dispose.  The **Stateful Widget's** accompanying **State class** also has access to a method called `deactivate`.  This method is a bit like the `dispose` method, however, it is specific to the **state class**.  Whenever the state object is removed from the widget tree in one area and then reinserted into the tree in another, the **deactivate method** is called.   This allows the user and the framework to more cleanly decouple the state from the UI in these cases.  

![deactivate-video.jpg](https://cdn.utopian.io/posts/f17631f67e0f9af2fd34f199b0602b047dbadeactivate-video.jpg)

Here is the deactivate method for our application.  You can see that we actually mute the video player's volume and then remove the listener from this video player.  Because the listener calls the `setState` function every frame that the video updates in it is much more efficient for use to remove this listener on the event that this state object is removed from this widget. 

##### Project GitHub Repository:
The Source Code for this project can be found [here](https://github.com/tensor-programming/flutter_videoplayer_example)
   

#### Video Tutorial
<iframe width="560" height="315" src="https://www.youtube.com/embed/7IG5kRFIMZw" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

#### Projects and Series
> ##### Stand Alone Projects:
> - [Dart Flutter Cross Platform Chat Application Tutorial](https://steemit.com/@tensor/dart-flutter-cross-platform-chat-application-tutorial)
> - [Building a Temperature Conversion Application using Dart's Flutter Framework](https://utopian.io/u/38673252)
> - [Managing State with Flutter Flux and Building a Crypto Tracker Application with Dart's Flutter Framework](https://utopian.io/u/43961141)
> ##### Building a Calculator
> - [Building a Calculator Layout using Dart's Flutter Framework](https://utopian.io/u/39348292)
> - [Finishing our Calculator Application with Dart's Flutter Framework](https://utopian.io/u/39522895)
> ##### Movie Searcher Application
> - [Building a Movie Searcher with RxDart and SQLite in Dart's Flutter Framework (Part 1)](https://utopian.io/u/41053969)
> - [Building a Movie Searcher with RxDart and SQLite in Dart's Flutter Framework (Part 2)](https://utopian.io/u/41208913)
> - [Building a Movie Searcher with RxDart and SQLite in Dart's Flutter Framework (Part 3, Final)](https://utopian.io/u/41384278)
> #### Minesweeper Game
> - [Building a Mine Sweeper Game using Dart's Flutter Framework (Part 1)](https://utopian.io/u/42282888)
> - [Building a Mine Sweeper Game using Dart's Flutter Framework (Part 2)](https://utopian.io/u/42433127)
> - [Building a Mine Sweeper Game using Dart's Flutter Framework (Part 3)](https://utopian.io/u/42568713)
> - [Building a Mine Sweeper Game using Dart's Flutter Framework (Part 4, Final)](https://utopian.io/u/42697072)
> #### Weather Application
> - [Building a Weather Application with Dart's Flutter Framework (Part 1, Handling Complex JSON with Built Code Generation)](https://utopian.io/u/44612250)
> - [Building a Weather Application with Dart's Flutter Framework (Part 2, Creating a Repository and Model)](https://utopian.io/u/44918839)
> - [Building a Weather Application with Dart's Flutter Framework (Part 3, RxCommand (RxDart) and Adding an Inherited Widget)](https://utopian.io/u/45106441)
> - [Building a Weather Application with Dart's Flutter Framework (Part 4, Using RxWidget to Build a Reactive User Interface)](https://utopian.io/u/45277762)
#### Curriculum

- [Building a Multi-Page Application with Dart's Flutter Mobile Framework](https://utopian.io/u/36304896)    
- [Making Http requests and Using Json in Dart's Flutter Framework](https://utopian.io/u/36711012)
- [Building Dynamic Lists with Streams in Dart's Flutter Framework](https://utopian.io/u/36947451)
- [Using GridView, Tabs, and Steppers in Dart's Flutter Framework](https://utopian.io/u/37160274)
- [Using Global Keys to get State and Validate Input in Dart's Flutter Framework](https://utopian.io/u/37555657)
- [The Basics of Animation with Dart's Flutter Framework](https://utopian.io/u/37731908)
- [Advanced Physics Based Animations in Dart's Flutter Framework](https://utopian.io/u/38077640)
- [Building a Drag and Drop Application with Dart's Flutter Framework](https://utopian.io/u/38246831)
- [Building a Hero Animation and an Application Drawer in Dart's Flutter Framework](https://utopian.io/u/38433382)
- [Using Inherited Widgets and Gesture Detectors in Dart's Flutter Framework](https://utopian.io/u/38862139)
- [Using Gradients, Fractional Offsets, Page Views and Other Widgets in Dart's Flutter Framework](https://utopian.io/u/39001452)
- [Making use of Shared Preferences, Flex Widgets and Dismissibles with Dart's Flutter framework](https://utopian.io/u/39694109)
- [Using the Different Style Widgets and Properties in Dart's Flutter Framework](https://utopian.io/u/39890067)
- [Composing Animations and Chaining Animations in Dart's Flutter Framework](https://utopian.io/u/40065925)
- [Building a Countdown Timer with a Custom Painter and Animations in Dart's Flutter Framework](https://utopian.io/u/40384708)
- [Reading and Writing Data and Files with Path Provider using Dart's Flutter Framework](https://utopian.io/u/40536227)
- [Exploring Webviews and the Url Launcher Plugin in Dart's Flutter Framework](https://utopian.io/u/40707081)
- [Adding a Real-time Database to a Flutter application with Firebase](https://utopian.io/u/41791441)
- [Building a List in Redux with Dart's Flutter Framework](https://utopian.io/u/41963715)
- [Managing State with the Scoped Model Pattern in Dart's Flutter Framework](https://utopian.io/u/42126946)
- [Authenticating Guest Users for Firebase using Dart's Flutter Framework](https://utopian.io/u/43164921)
- [How to Monetize Your Flutter Applications Using Admob](https://utopian.io/u/43345353)
- [Using Geolocator to Communicate with the GPS and Build a Map in Dart's Flutter Framework](https://utopian.io/u/43502503)
- [Managing the App Life Cycle and the Screen Orientation in Dart's Flutter Framework](https://utopian.io/u/43654354)
- [Making use of General Utility Libraries for Dart's Flutter Framework](https://utopian.io/u/44131554)
- [Interfacing with Websockets and Streams in Dart's Flutter Framework](https://utopian.io/u/44306750)

    

<br /><hr/><em>Posted on <a href="https://utopian.io/utopian-io/@tensor/playing-local-network-and-youtube-videos-with-the-video-player-plugin-in-dart-s-flutter-framework">Utopian.io -  Rewarding Open Source Contributors</a></em><hr/>