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.

 

 

pubspec.yaml :

Add the chewie, video_player dependencies to your pubspec file such that we can integrate flutter video player using them. Also provide the latest versions of the library to avoid any 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,
  ),
);

 

Complete code for flutter video player widget class.

 

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() {
    // TODO: implement 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() {
    // TODO: implement dispose
    super.dispose();
    chewieController.dispose();
  }

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

 

main.dart :

We are making use of the above created video player widget in this screen.

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
          ),
        ),
      ),
    );
  }
}

 

If you have any query’s in this tutorial on flutter video player do let us know in the comment section below.If you like this tutorial do like and share us for more interesting updates.