Flutter Video Participant Widget Integration

Flutter Video Participant :

On this weblog we’re going to be taught the best approach to implement video participant in your flutter app. Making a customized widget class as including required options.

Flutter video gamers are useful to show / showcase your product way more effectively in order that customers can perceive the providers supplied by the app.

Including video in splash display, dashboard or intro screens makes it a lot enticing to the person interface and gives a wealthy look as effectively.

Now a days there may be availability of excessive pace web which boosts the app utilization by streaming prime quality movies on mobiles and in addition gadgets are getting up to date.

For extra fascinating flutter tutorials go to us and get detailed rationalization.

pubspec.yaml :

Add the chewie, video_player dependencies to your pubspec file such that we are able to combine flutter video participant utilizing them. Additionally present the most recent variations of the library to keep away from any points.

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.2
  chewie: ^1.3.6
  video_player: 2.4.8

VideoPlayerWidget.dart :

On this weblog we’re going to create a flutter video participant widget class such that we are able to simply combine it any the place in our app simply.

We have to declare variables required for flutter video participant

remaining VideoPlayerController videoPlayerController;
remaining bool looping;
remaining bool autoplay;

And initialize these with the assistance of constructor this class can be utilized to play movies in several screens.

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

Now declare Chewie controller

late ChewieController chewieController;

Declare the variables within the chewieController utilizing init state.Right here we are able to specify necessities like aspectRatio, autoInitialize, autoPlay, looping and in addition error handler such that we are able to deal with undesirable errors.

ChewieController(
  videoPlayerController: widget.videoPlayerController,
  aspectRatio: 4/9,
  autoInitialize: true,
  autoPlay: widget.autoplay,
  looping: widget.looping,

  errorBuilder: (context, errorMessage){
  return Middle(
    baby: Textual content("One thing went mistaken"),
  );

And likewise add a dispose technique

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

Lastly declare the chewie controller in order that we are able to watch video

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

Full code for flutter video participant widget class.

import 'bundle:chewie/chewie.dart';
import 'bundle:flutter/materials.dart';
import 'bundle:video_player/video_player.dart';

class VideoPlayerWidget extends StatefulWidget {

  remaining VideoPlayerController videoPlayerController;
  remaining bool looping;
  remaining 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
    tremendous.initState();
    chewieController = ChewieController(videoPlayerController: widget.videoPlayerController,
      aspectRatio: 4/9,
      autoInitialize: true,
      autoPlay: widget.autoplay,
      looping: widget.looping,

      errorBuilder: (context, errorMessage){
      return Middle(
        baby: Textual content("One thing went mistaken"),
      );
      }
    );
  }

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

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

foremost.dart :

We’re making use of the above created video participant widget on this display.

import 'bundle:flutter/materials.dart';
import 'VideoPlayerWidget.dart';
import 'bundle:video_player/video_player.dart';

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

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

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

class _MyAppState extends State<MyApp> {
  @override
  Widget construct(BuildContext context) {
    return MaterialApp(
      house: Scaffold(
        appBar: AppBar(
          title: Textual content("Video Participant"),
        ),
        physique: Container(
          baby: VideoPlayerWidget(
            VideoPlayerController.asset('asset/video.mp4'),
            true,
            true
          ),
        ),
      ),
    );
  }
}

In case you have any question’s on this tutorial on flutter video participant do tell us within the remark part under.For those who like this tutorial do like and share us for extra fascinating updates.