Know How to Play Video in Flutter App with Implementation Example

• General

You’ve probably encountered a variety of applications featuring video content, including those for movies, sports, and culinary apps with video instructions. Have you ever wanted to include video content in a Flutter application to play video in Flutter?

Your user experience can be made more interactive and visually appealing by playing movies in a Flutter app development. Flutter makes it simple to add video playing to your app, whether you want to stream videos from the internet or play a video clip that is locally saved.

The developer is now empowered to create their own video player and use it in their cross-platform mobile application. Although this is incredibly helpful, certain things are missing, namely, more controls for the video player.

Everyone wants to work efficiently; hence Flutter packages and plugins became popular. I hope that everyone is aware of this package.

It would be difficult to implement video functionality from scratch. However, there aren’t many plugins accessible to simplify developer life.

You will discover how to use the plugin for playing the video and manage the various features of the video player in this tutorial.

A necessary type of media that can be incorporated into the application is a video. The better_player plugin in Flutter is used to manage videos. This carries out operations such as starting a video, pausing it or muting it.

It can be used to play videos stored in the application’s assets and videos retrieved from the internet. Through an example application, we shall investigate the subject in more detail in this post.

Add this package for playing video in any Flutter application.
To add a package, run the below command.

flutter pub add better_player

For one video in your app, specify the source. Three categories of data sources exist:

1. A network-based data source that plays videos from external resources using the URL
2. A file-based data source that plays videos from internal resources using a URL
3. Memory is a data source that plays videos from a list of bytes.

Two fundamental ways to set up Better Player

BetterPlayer.network(url, configuration)
BetterPlayer.file(url, configuration)

Example of implementing the better player to play video in Flutter app

main.dart file

import 'package:better_player/better_player.dart';
import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: VideoPlayer(),
    );
  }
}
class VideoPlayer extends StatefulWidget {
  const VideoPlayer({super.key});
  @override
  State<VideoPlayer> createState() => _VideoPlayerState();
}
class _VideoPlayerState extends State<VideoPlayer> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Example player"),
      ),
      body: AspectRatio(
        aspectRatio: 16 / 9,
        child: BetterPlayer.network(          "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4",
          betterPlayerConfiguration: const BetterPlayerConfiguration(
            aspectRatio: 16 / 9,
          ),
        ),
      ),
    );
  }
}

Output

Conclusion

In this article, we have seen how to play videos in Flutter applications. Instead of building a video player from scratch, use the better player plugin, which comes with all the necessary features pre-installed and saves a tonne of development time. We hope you enjoy this article.

If you want to integrate video functionality into your mobile app development, you can contact the leading Flutter app development company and hire Flutter developers that will support and maintain your projects. Hence, it makes your app runs seamlessly with their efforts and skills.

Frequently Asked Questions (FAQs)

1. How can I run a virtual device on Flutter?

Go to Tools > AVD Manager on Android Studio and click “Create Virtual Device.” Select a device model, and then tap on “Next.” Now, you will see a list of the suggested files, API, SDK, and tools to download, and then again tap “Next.” Hence, after that, give the name to your emulator and finally click on “Finish.”

2. What is an emulator in Flutter development?

An emulator is a virtual device created to run the programs/ applications derived from the host system. An Android emulator imitates an Android device and runs and tests the applications on the host system without needing the physical device.

3. What is an app preview video?

App previews are short videos demonstrating the features, functionality, and user interface of the app or game on your app store product page. Hence, you can use the Mac to capture the screen recordings of your apps on Mac, iOS devices, or Apple TV.

Written by Abhishek Dhanani

Abhishek Dhanani, a skilled software developer with 3+ years of experience, masters Dart, JavaScript, TypeScript, and frameworks like Flutter and NodeJS. Proficient in MySQL, Firebase, and cloud platforms AWS and GCP, he delivers innovative digital solutions.