Flutter Video Player & Chewie Player

Alok Kumar
Nerd For Tech
4 min readAug 27, 2020

--

For video player development in flutter, one plugin that comes into the developer’s mind is this:

This indeed gives power to the developer to make your video player, and use it inside your cross-platform mobile application. Now this comes very handy, but there are certain things which you don’t get on the plate, that is, more controls over the video player.

Everybody wants to work smart, hence, flutter plugins/packages came into the picture. I hope every one knows about this package, but if not, then here it is:

DISCLAIMER: The video player plugin used by chewie is not functional on iOS simulators. An iOS device must be used during development/testing

Now, this is a great package, which comes with a lot more power in respect of the below pointers:

  • More controls over the video player
  • Operating System based Video Player Material UI

It basically wraps the video_player plugin, and add some cool material UI controls to it. Now, I am not here to explain about, how to use the chewie plugin, you can find it below only. You can browse more options as per your will.

Now, let us talk about the most important stuff, and that is, how to use this more efficiently.

WHY?? It is because, most of the people who have just started their journey with video player or flutter, might ignore some important pointers, and land up seeing a lot of bugs, or inefficient performances in the app, while using this. These are:

1.Video still plays when we come out of the Activity/View/Page/StatefulWidget, having the video player:

The answer to that is, many of us often forget about the need to dispose the required controllers, and these are, VideoPlayerController and ChewieController in the dispose().

Please note that, to use the chewie player, you need to add video_player plugin as well. You will find that in the video lecture itself.

How do you do this? Well, here is your answer

What happens when we do it? It disposes both the controllers, which eventually tells the machine not to use it anymore. Hence, no video will be played, as soon as you will come out of the page.

2. Exit Fullscreen is not happening smoothly with auto-rotate on in the mobile device

This is the second thing which I noticed while working with this plugin, when auto-rotate is on in the mobile device. When you hit on the option to exit the fullscreen mode, it doesn’t changes it’s orientation actually. Not observed when auto-rotate is off, but it might be the case. So, what is the solution??

The solution is quite simple, which is hidden in the ChewieController initialization itself. See, this player is smart, but you need to add the listeners while initializing it, and tell the controller that, hey!! you need to do this, when I exit the fullscreen mode while I still am on the auto-rotate mode in my mobile device. [Doesn’t matter duh!]

3. Orientation applies to every pages in the application, even though, the app was set to Portrait mode only

A bigger and most irritating problem of all the time which a developer will face while developing a video player using chewie and video_player is, many a times you will see, even though the application was set Portrait mode via this code:

I can assure you that this code works, but as soon as you use the fullscreen mode option from the controller, it overrides the definition which you have provided via the above code, and the whole app becomes, rotation friendly, of course when you are on auto-rotate mode.

What is the solution?? The solution is, again not a rocket science. You just need to tell the machine again, that, hey!! please do this while I exit from the full screen and leave this page. Don’t make it rotation friendly, for god sake!!

This can again be done via dispose(). While going from the video player page, we define the app principle again, that is, to make it portrait mode.

How do we do this??

And, if you are going to another page from this page, just define this SystemChrome.setPrefferedOrientations() before leaving the page. And that is how, you get yourselves out of this pit of cramming your head on the orientation issues.

That’s all folks for now!! Your valuable comments are welcome, if you want to state something. Please do, I will learn something from it as well. Till then HAPPY CODING!!

--

--