How To Pause Video In Flutter App [Flutter Easy Guide]

In this tutorial, we’ll learn how to pause video in Flutter app with the help of an easy Flutter code example.

Introduction: Pause Video In Flutter App

In this post, we’ll just learn how to pause video in Flutter app. If you are interested in how to properly import Flutter video player and initialize it then I’ve written a detailed blog on it as well. Click here to navigate to it.

Now let’s jump into our main topic in which we’ll see how to pause video in Flutter app. We’ll be going through a detailed practical example code so you can have a better idea of how to implement it.

But before that, I’d highly encourage you to read the above mentioned article on how to import and initialize video player in Flutter app.

Step By Step Guide: Pause Video In Flutter App

Follow the below step in order to practically understand how to pause video in Flutter app.

Step 1

late VideoPlayerController _controller;

 @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

 @override
  void initState() {
    super.initState();
    _controller = VideoPlayerController.network(
        'https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4')
      ..initialize().then((_) {
        _controller.play();
        setState(() {});
      });
  }

The controller is initialized in the above code. We’ve passed it a sample network video path. Use it in initState of your app’s screen page so whenever the page loads, then with it the video player will also get initialized with the required data.

Also, we’ve used the play method to automatically play the video after its initialized so we can pause it. See below sections for practical demonstration on how to pause the video.

Step 3

Center(
   child: _controller.value.isInitialized? AspectRatio(
                        aspectRatio: _controller.value.aspectRatio,
                        child: VideoPlayer(_controller),
                      )
                    : CircularProgressIndicator())

It’ll check it the controller is initialized. If yes, then it’ll show the video. If not, then it’ll just show the Flutter circular progress indicator widget.

Step 4 (Pause Video)

Now comes the main part in which we’ll pause the video. For that, we’ve to use the pause method of video player controller. See below code:

_controller.pause()

For demonstration, we’ll pause the video by clicking on a specific button. See below example:

For that, we’ll use a Flutter container widget with a background color and we’ll pass a Flutter icon widget as a child to it. This is just for decoration so the button looks good.

After that, we’ll wrap this container with Flutter inkwell widget to make it clickable and will pass the required code in its onTap function. See below code:

 InkWell(
          onTap: () {
            setState(() {
              _controller.pause(); // pause the video
            });
              },
              child: Container(
                height: 40,
                width: 40,
                alignment: Alignment.center,
                decoration: BoxDecoration(
                    shape: BoxShape.circle, color: Colors.green.shade500),
                child: Icon(Icons.pause, color: Colors.white),
              ),
            ),

Just make sure to add the _controller.play() in initState block so the video is being played. Implement it in your code and click the button. You’ll see that video will stop after the button is clicked.

So this is how we can easily pause video in Flutter app. Hope you like this post.

Click here if you want to learn how to play video in Flutter app.

The complete source code of pause video in Flutter app with button is given in the below section.

Pause Video In Flutter App With Button Complete Source Code

import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Homepage(),
    );
  }
}
class Homepage extends StatefulWidget {
  @override
  State<Homepage> createState() => _HomepageState();
}
class _HomepageState extends State<Homepage> {
  late VideoPlayerController _controller;
  @override
  void initState() {
    super.initState();
    _controller = VideoPlayerController.network(
        'https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4')
      ..initialize().then((_) {
          _controller.play();
        setState(() {});
      });
  }
  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
            body: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Center(
            child: _controller.value.isInitialized
                ? AspectRatio(
                    aspectRatio: _controller.value.aspectRatio,
                    child: VideoPlayer(_controller),
                  )
                : CircularProgressIndicator()),
        SizedBox(
          height: 24,
        ),
        InkWell(
          onTap: () {
            setState(() {
              _controller.pause();
            });
          },
          child: Container(
            height: 40,
            width: 40,
            alignment: Alignment.center,
            decoration: BoxDecoration(
                shape: BoxShape.circle, color: Colors.green.shade500),
            child: Icon(Icons.pause, color: Colors.white),
          ),
        )
      ],
    )));
  }
}

Conclusion

To conclude this tutorial, now you’ve a detailed and in-depth practical knowledge of how to pause video in Flutter app. I’d love to have your feedback on this post.

I’d also love to see you visit my other tutorials on Flutter app development and Python programming as well. Thank you for reading this post.