How to Play and Pause a Video in Flutter…!!

8 min readJan 6, 2020

Hello guys, this is Anikit Grover, I am currently learning Flutter from past few weeks and looking forward an opportunities to work in IT industry as fresher and while learning every day I will be challenging myself to improve myself. Here is my new 2020 resolution that what I have decided to do commitment towards myself and I think you should also do commitment to yourself in the new resolution to make better version of yourself as well…
” To learn something new every day and explore as much as I can towards technologies”
Before moving forward, if u haven't read my first blog before or coming here for the first time, I have also shared previous blog link below as well and if you like this blog and previous one as well and want more updates about my blogs then press claps button at the end and if it gave some knowledge and its benefical to you .It will also encourage me as well to learn more and share the things that I have learned to give back our learning community ..and share with other communities as well..Here read a complete blog towards end .it was an amazing learning journey for me as well.. I hope its for you as well…

How to Build FAQ ChatBot Using Dialogflow From Scratch……

Hello, Welcome to all of my friends and I hope you all will be having a great time ahead and enjoying every best moment…

medium.com

Overview /Perquisites:

Before let's dive into it, I hope all the guys have a basic understanding or done the basic project in Flutter in android studio , those who have done the first project before it is very easy for them and those who have not done before their first project , Don't Worry, I will make sure that this makes easier for them also…if u are stuck somewhere let me know I will surely help u out….

Overview about Flutter as well….
Whats is Flutter?

Flutter is an open-source UI software development kit created by Google. It is used to develop applications for Android, iOS, Windows, Mac, Linux, Google Fuchsia and the web. The first version of Flutter was known as codename “Sky” and ran on the Android operating system...

Do check this out 2 playlists that link has been shared below to get Overview about Flutter as well…..if u want me to share or explained about Flutter then surely I will tell you but let me know after that I will also share with u all as well :

Flutter by Smarthred:

2. Flutter by Google Developers:

Let's start at…

SetUp and Installation of Flutter :

Installation of Flutter in Windows

Installation of Flutter and Setup in MacBook

Creating a new project in flutter using Android Studio

Creating a new project in the flutter in Xcode for MacBook

let's dive into after installing of Flutter in MacBook or Android Studio and creating a new project in Flutter either in Android Studio or MacBook Pro as well…

Plugins for video player in flutter
Playing videos is a common task in app development, and Flutter apps are no exception. To play videos, the Flutter team provides the video_player plugin. You can use the video_player plugin to play videos stored on the file system, as an asset, or from the internet.
On iOS, the video_player plugin makes use of AVPlayer to handle playback. On Android, it uses ExoPlayer.
This recipe demonstrates how to use the video_player package to stream a video from the internet with basic play and pause controls using the following steps:
Add the video_player dependency.
Add permissions to your app.
Create and initialize a VideoPlayerController.
Display the video player.
Play and pause the video.
1. Add the video_player dependency
This recipe depends on one Flutter plugin: video_player. First, add this dependency to your pubspec.yaml.
dependencies: flutter: sdk: flutter video_player:

2. Add permissions to your app

Next, update your android and ios configurations to ensure that your app has the correct permissions to stream videos from the internet.
Android
Add the following permission to the AndroidManifest.xml file just after the <application> definition. The AndroidManifest.xml the file is found at <project root>/android/app/src/main/AndroidManifest.xml.

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <application ...>    </application>    <uses-permission android:name="android.permission.INTERNET"/>
</manifest>

iOS

For iOS, add the following to the Info.plist file found at <project root>/ios/Runner/Info.plist.

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>

Warning: The video_player the plugin doesn’t work on iOS simulators. You must test videos on real iOS devices.

3. Create and initialize a `VideoPlayerController`

Now that you have the video_player plugin installed with the correct permissions, create a VideoPlayerController. The VideoPlayerController the class allows you to connect to different types of videos and control playback.
Before you can play videos, you must also initialize the controller. This establishes the connection to the video and prepares the controller for playback.
To create and initialize the VideoPlayerController do the following:
Create a StatefulWidget with a companion State class
Add a variable to the State class to store the VideoPlayerController
Add a variable to the State class to store the Future returned from VideoPlayerController.initialize
Create and initialize the controller in the initState method
Dispose of the controller in the dispose method

class VideoPlayerScreen extends StatefulWidget {
  VideoPlayerScreen({Key key}) : super(key: key);  @override
  _VideoPlayerScreenState createState() => _VideoPlayerScreenState();
}class _VideoPlayerScreenState extends State<VideoPlayerScreen> {
  VideoPlayerController _controller;
  Future<void> _initializeVideoPlayerFuture;  @override
  void initState() {
    // Create an store the VideoPlayerController. The VideoPlayerController
    // offers several different constructors to play videos from assets, files,
    // or the internet.
    _controller = VideoPlayerController.network(
      'https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4',
    );    _initializeVideoPlayerFuture = _controller.initialize();    super.initState();
  }  @override
  void dispose() {
    // Ensure disposing of the VideoPlayerController to free up resources.
    _controller.dispose();    super.dispose();
  }  @override
  Widget build(BuildContext context) {
    // Complete the code in the next step.
  }
}

4. Display the video player

Now, display the video. The video_player plugin provides the VideoPlayer widget to display the video initialized by the VideoPlayerController. By default, the VideoPlayer the widget takes up as much space as possible. This often isn’t ideal for videos because they are meant to be displayed in a specific aspect ratio, such as 16x9 or 4x3.
Therefore, wrap the VideoPlayer widget in an AspectRatio widget to ensure that the video has the correct proportions.
Furthermore, you must display the VideoPlayer widget after the _initializeVideoPlayerFuture() completes. Use FutureBuilder to display a loading spinner until the controller finishes initializing. Note: initializing the controller does not begin playback.

// Use a FutureBuilder to display a loading spinner while waiting for the
// VideoPlayerController to finish initializing.
FutureBuilder(
  future: _initializeVideoPlayerFuture,
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.done) {
      // If the VideoPlayerController has finished initialization, use
      // the data it provides to limit the aspect ratio of the VideoPlayer.
      return AspectRatio(
        aspectRatio: _controller.value.aspectRatio,
        // Use the VideoPlayer widget to display the video.
        child: VideoPlayer(_controller),
      );
    } else {
      // If the VideoPlayerController is still initializing, show a
      // loading spinner.
      return Center(child: CircularProgressIndicator());
    }
  },
)

5. Play and pause the video

By default, the video starts in a paused state. To begin playback, call the play() method provided by the VideoPlayerController. To pause playback, call the pause() method.
For this example, add a FloatingActionButton to your app that displays a play or pause icon depending on the situation. When the user taps the button, play the video if it’s currently paused, or pause the video if it’s playing.

FloatingActionButton(
  onPressed: () {
    // Wrap the play or pause in a call to `setState`. This ensures the
    // correct icon is shown
    setState(() {
      // If the video is playing, pause it.
      if (_controller.value.isPlaying) {
        _controller.pause();
      } else {
        // If the video is paused, play it.
        _controller.play();
      }
    });
  },
  // Display the correct icon depending on the state of the player.
  child: Icon(
    _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
  ),
)

Complete example

Here is a complete code for playing and pause of the video in flutter..if u want to make an attractive video player and have keen to learning..how this code actually works….copy and paste the code into New=>Flutter PROJECT=>MAIN.DART (Android Studio) and exceuting all the instructions that will be share aboverd,you will see desired output that i have shared with you at the last or after this code..

import 'dart:async';import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';void main() => runApp(VideoPlayerApp());class VideoPlayerApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Video Player Demo',
      home: VideoPlayerScreen(),
    );
  }
}class VideoPlayerScreen extends StatefulWidget {
  VideoPlayerScreen({Key key}) : super(key: key);  @override
  _VideoPlayerScreenState createState() => _VideoPlayerScreenState();
}class _VideoPlayerScreenState extends State<VideoPlayerScreen> {
  VideoPlayerController _controller;
  Future<void> _initializeVideoPlayerFuture;  @override
  void initState() {
    // Create and store the VideoPlayerController. The VideoPlayerController
    // offers several different constructors to play videos from assets, files,
    // or the internet.
    _controller = VideoPlayerController.network(
      'https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4',
    );    // Initialize the controller and store the Future for later use.
    _initializeVideoPlayerFuture = _controller.initialize();    // Use the controller to loop the video.
    _controller.setLooping(true);    super.initState();
  }  @override
  void dispose() {
    // Ensure disposing of the VideoPlayerController to free up resources.
    _controller.dispose();    super.dispose();
  }  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Butterfly Video'),
      ),
      // Use a FutureBuilder to display a loading spinner while waiting for the
      // VideoPlayerController to finish initializing.
      body: FutureBuilder(
        future: _initializeVideoPlayerFuture,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            // If the VideoPlayerController has finished initialization, use
            // the data it provides to limit the aspect ratio of the video.
            return AspectRatio(
              aspectRatio: _controller.value.aspectRatio,
              // Use the VideoPlayer widget to display the video.
              child: VideoPlayer(_controller),
            );
          } else {
            // If the VideoPlayerController is still initializing, show a
            // loading spinner.
            return Center(child: CircularProgressIndicator());
          }
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // Wrap the play or pause in a call to `setState`. This ensures the
          // correct icon is shown.
          setState(() {
            // If the video is playing, pause it.
            if (_controller.value.isPlaying) {
              _controller.pause();
            } else {
              // If the video is paused, play it.
              _controller.play();
            }
          });
        },
        // Display the correct icon depending on the state of the player.
        child: Icon(
          _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
        ),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}