Flutter Video Player Widget Integration

Flutter Video Player :

In this blog we are going to learn the easiest way to implement video player in your flutter app. Creating a custom widget class as adding required features.

Flutter video players are helpful to display / showcase your product much more efficiently so that users can understand the services offered by the app.

Adding video in splash screen, dashboard or intro screens makes it much attractive to the user interface and provides a rich look as well.

Now a days there is availability of high speed internet which enhances the app usage by streaming high quality videos on mobiles and also devices are getting updated.

For more interesting flutter tutorials visit us and get detailed explanation.

Flutter Video Player :

Explore the tutorial below for comprehensive insights on integrating the video player.

pubspec.yaml :

Include the dependencies ‘chewie’ and ‘video_player’ in your pubspec file to seamlessly integrate the Flutter video player. Ensure you use the latest versions to prevent any potential issues.

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  chewie: ^1.3.6
  video_player: ^2.4.8

VideoPlayerWidget.dart :

In this blog we are going to create a flutter video player widget class such that we can easily integrate it any where in our app easily.

We need to declare variables required for flutter video player

final VideoPlayerController videoPlayerController; 
final bool looping; 
final bool autoplay;

And initialize these with the help of constructor this class can be used to play videos in different screens.

VideoPlayerWidget(
  this.videoPlayerController,
  this.looping,
  this.autoplay,
);

Now declare Chewie controller

late ChewieController chewieController;

Declare the variables in the chewieController using init state.Here we can specify requirements like aspectRatio, autoInitialize, autoPlay, looping and also error handler such that we can handle unwanted errors.

ChewieController(
  videoPlayerController: widget.videoPlayerController,
  aspectRatio: 4 / 9,
  autoInitialize: true,
  autoPlay: widget.autoplay,
  looping: widget.looping,
  errorBuilder: (context, errorMessage) {
    return Center(
      child: Text("Something went wrong"),
    );
  },
)

And also add a dispose method

@override
void dispose() {
  // TODO: implement dispose
  super.dispose();
  chewieController.dispose();
}

Finally declare the chewie controller so that we can watch video

Container(
  child: Chewie(
    controller: chewieController,
  ),
);

The entire code for the Video player widget class is provided below.

import 'package:chewie/chewie.dart';
import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';

class VideoPlayerWidget extends StatefulWidget {
  final VideoPlayerController videoPlayerController;
  final bool looping;
  final bool autoplay;

  VideoPlayerWidget(
      this.videoPlayerController,
      this.looping,
      this.autoplay,
  );

  @override
  State<VideoPlayerWidget> createState() => _VideoPlayerWidgetState();
}

class _VideoPlayerWidgetState extends State<VideoPlayerWidget> {
  late ChewieController chewieController;

  @override
  void initState() {
    super.initState();
    chewieController = ChewieController(
      videoPlayerController: widget.videoPlayerController,
      aspectRatio: 4 / 9,
      autoInitialize: true,
      autoPlay: widget.autoplay,
      looping: widget.looping,
      errorBuilder: (context, errorMessage) {
        return Center(
          child: Text("Something went wrong"),
        );
      },
    );
  }

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

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Chewie(
        controller: chewieController,
      ),
    );
  }
}

main.dart :

In this screen, we utilize the previously crafted video player widget. Additionally, Flutter video player from a URL is also supported.

import 'package:flutter/material.dart';
import 'VideoPlayerWidget.dart';
import 'package:video_player/video_player.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Video Player"),
        ),
        body: Container(
          child: VideoPlayerWidget(
            VideoPlayerController.asset('asset/video.mp4'),
            true,
            true,
          ),
        ),
      ),
    );
  }
}

Considering the Video player cache is crucial in design to prevent unexpected crashes.

If you have any questions about this Video player tutorial, feel free to ask in the comments below. If you find this tutorial helpful, please like and share for more intriguing updates.