Have you ever wanted to show a video in your Flutter app that takes up the whole screen beautifully? It's a common task, but getting the aspect ratio right so the video doesn't look stretched or squashed can be tricky. Here's a simple way to do it.
Getting Started
First, you need to add the video_player package to your project. This package handles playing videos in Flutter.
Showing the Video Fullscreen
To make the video fill the screen, you'll typically use a widget structure that ensures the video player takes all available space. Think about placing the video player inside a Stack and using Positioned.fill to make it expand.
Also, if you have an app bar but want the video to go behind it for a true fullscreen look, remember to set extendBodyBehindAppBar to true on your Scaffold.
Keeping the Right Aspect Ratio
Just making the video fill the screen isn't enough. You need to make sure it keeps its original shape (aspect ratio). A good way to handle this is by wrapping your video player widget inside a custom widget. This custom widget can use FittedBox with BoxFit.cover to scale the video while maintaining its aspect ratio, making sure it covers the entire screen area without distortion.
Inside this custom widget, you can use an AspectRatio widget to enforce the correct ratio, getting the ratio directly from the video player's value.
This approach ensures that no matter the screen size or orientation, your video will fill the screen correctly while looking exactly as it should.
Putting it Together
By combining the video_player package, setting up your layout to allow fullscreen content (like using Stack and Positioned.fill), and using a wrapper widget with FittedBox and AspectRatio to handle scaling and ratio, you can easily achieve a great fullscreen video experience in your Flutter app.
