Flutter Video Participant Widget Integration

Flutter Video Participant :

On this weblog we’re going to be told one of the simplest ways to put into effect video participant to your flutter app. Making a customized widget elegance as including required options.

Flutter video avid gamers are useful to show / exhibit your product a lot more successfully in order that customers can perceive the services and products presented via the app.

Including video in splash display, dashboard or intro monitors makes it a lot horny to the person interface and gives a wealthy glance as smartly.

Now a days there may be availability of top pace web which reinforces the app utilization via streaming top of the range movies on mobiles and in addition gadgets are getting up to date.

For extra attention-grabbing flutter tutorials discuss with us and get detailed rationalization.

 

 

pubspec.yaml :

Upload the chewie, video_player dependencies in your pubspec record such that we will combine flutter video participant the use of them. Additionally give you the newest variations of the library to keep away from any problems.

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 elegance such that we will simply combine it any the place in our app simply.

We want to claim variables required for flutter video participant

ultimate VideoPlayerController videoPlayerController;
ultimate bool looping;
ultimate bool autoplay;

 

And initialize those with the assistance of constructor this elegance can be utilized to play movies in numerous monitors.

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

 

Now claim Chewie controller

past due ChewieController chewieController;

 

Claim the variables within the chewieController the use of init state.Right here we will specify necessities like aspectRatio, autoInitialize, autoPlay, looping and in addition error handler such that we will deal with undesirable mistakes.

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

  errorBuilder: (context, errorMessage){
  go back Heart(
    kid: Textual content("One thing went flawed"),
  );

 

And in addition upload a dispose manner

@override
void dispose() {
  // TODO: put into effect dispose
  tremendous.dispose();
  chewieController.dispose();
}

 

In spite of everything claim the chewie controller in order that we will watch video

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

 

Entire code for flutter video participant widget elegance.

 

import 'bundle:chewie/chewie.dart';
import 'bundle:flutter/subject matter.dart';
import 'bundle:video_player/video_player.dart';

elegance VideoPlayerWidget extends StatefulWidget {

  ultimate VideoPlayerController videoPlayerController;
  ultimate bool looping;
  ultimate bool autoplay;

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

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

elegance _VideoPlayerWidgetState extends State<VideoPlayerWidget> {

  past due ChewieController chewieController;

  @override
  void initState() {
    // TODO: put into effect initState
    tremendous.initState();
    chewieController = ChewieController(videoPlayerController: widget.videoPlayerController,
      aspectRatio: 4/9,
      autoInitialize: true,
      autoPlay: widget.autoplay,
      looping: widget.looping,

      errorBuilder: (context, errorMessage){
      go back Heart(
        kid: Textual content("One thing went flawed"),
      );
      }
    );
  }

  @override
  void dispose() {
    // TODO: put into effect dispose
    tremendous.dispose();
    chewieController.dispose();
  }

  @override
  Widget construct(BuildContext context) {
    go back Container(
      kid: Chewie(
        controller: chewieController,
      ),
    );
  }
}

 

primary.dart :

We’re applying the above created video participant widget on this display.

import 'bundle:flutter/subject matter.dart';
import 'VideoPlayerWidget.dart';
import 'bundle:video_player/video_player.dart';

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

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

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

elegance _MyAppState extends State<MyApp> {
  @override
  Widget construct(BuildContext context) {
    go back MaterialApp(
      house: Scaffold(
        appBar: AppBar(
          identify: Textual content("Video Participant"),
        ),
        frame: Container(
          kid: VideoPlayerWidget(
            VideoPlayerController.asset('asset/video.mp4'),
            true,
            true
          ),
        ),
      ),
    );
  }
}

 

If in case you have any question’s on this educational on flutter video participant do tell us within the remark segment beneath.In case you like this educational do like and percentage us for extra attention-grabbing updates.