OverflowBox and videos in Flutter

Recently I was working on something with Flutter when I encountered with a small problem: how can I make a video to fill up all the available space inside a Container widget?

Well, today I’m gonna explain how I did it and how the “Understanding constraints” Flutter docs article helped me in that.

The OverflowBox widget

I’m new in the Flutter world, so I usually have to deal with weird/strange/unexpected results while using it because I don’t have too much experience. But recently I found an article (mentioned earlier) about how constraints works in Flutter, written by the official Flutter development team. That article helped me a lot and was like a revelation, because it says a lot of important stuff to take in consideration while working with Flutter and since I didn’t learned Flutter by reading the documentation, it was really useful for me.

It was in that article where I found the OverflowBox widget, which as it’s name suggests, is a widget that allows it’s inner child to overflow without getting the typical “overflow error” in Flutter. In the moment, I didn’t pay too much attetion to it because it didn’t sound too interesting to me and wasn’t able to imagine a situation where I would need to use it. Except that… It didn’t take too much time for me to found a use case.

Videos and the AspectRatio widget

As I said at the start, I was making something in Flutter (a fixed size widget where to put a widget for playing videos) and everytthing was going good until I realized that the rounded corners I made for the widget weren’t working. I spent a while trying to figure out what the heck was going on, because not only the rounded corners weren’t working , but also the video had a different size. After a couple of long minutes, I started to suspect about what was going on: I saw the AspectRatio widget… And decided to put a background color to the Container where I was making all of that and… I saw the problem.

Look, when we put something into an AspectRatio widget, it will do pretty much what the name suggests: ensure the child widget keeps the given aspect ratio, so if we put that widget inside of another widget that has a different aspect ratio, it will do something like this:

As we can see, the widget does the job very well and the result is the expected… Which is kinda obvious by just looking at the name of the widget, but for me that wasn’t the case. And the code for that looks like this:

return Center(
  child: Container(
    width: 200,
    height: 200,
    decoration: const BoxDecoration(color: Colors.amber,),
    child: AspectRatio(
      aspectRatio: _controller.value.aspectRatio,
      child: VideoPlayer(_controller),
    ),
  ),
);

Now, using the AspectRatio widget with videos makes a lot of sense, but… I didn’t want this result… I wanted to fill the entire space with the video, no matter if that means that it will be cropped off.

The solution…?

So, I was thinking… “How can I solve this?”… And then, all of the sudden, I just remembered that I saw a widget in an article that I readed recently… That’s right, the OverflowBox widget I just saw a couple of days ago in the “Understanding constraints” article.

There was no time to think twice, I started to code and… It didn’t work. But, it was my fault, because it didn’t set how I wanted the child to overflow inside the OverflowBox widget, so I fixed that and there we go, problem… Solved?

Well, what’s going on? It still looks to have the same aspect ratio, but bigger… And we can tell the OverflowBox is doing the job because we can’t see the yellow background… And the code is correct as we just wrapped the AspectRatio with the OverflowBox, that should do the job, right?

return Center(
  child: Container(
    width: 200,
    height: 200,
    decoration: const BoxDecoration(color: Colors.amber,),
    child: OverflowBox(
      maxWidth: double.infinity,
      maxHeight: 200,
      child: AspectRatio(
        aspectRatio: _controller.value.aspectRatio,
        child: VideoPlayer(_controller),
      ),
    ),
  ),
);

Well… No. This result is expected and should not be surprising if we pay attention to the Flutter API: almost all widgets does only 1 thing and almost all of them don’t crop other widgets unless we specifically tell them to do it.

Let’s fix this already!

Alright, now it’s more clear what we need to do, so let’s “fix” the code above by setting the clipBehavior property:

return Center(
  child: Container(
    width: 200,
    height: 200,
    clipBehavior: Clip.antiAlias,
    decoration: const BoxDecoration(color: Colors.amber,),
    child: OverflowBox(
      maxWidth: double.infinity,
      maxHeight: 200,
      child: AspectRatio(
        aspectRatio: _controller.value.aspectRatio,
        child: VideoPlayer(_controller),
      ),
    ),
  ),
);

And now, finally, there we go, problem solved:

Now, this can also be done with ClipRect, but Containerlet’s us set the width, height, background color and we can even do the same thing of clipping the content… But also making nice rounded corners by just adding a single line of code!

And that’s just…

return Center(
  child: Container(
    width: 200,
    height: 200,
    clipBehavior: Clip.antiAlias,
    decoration: BoxDecoration(
      color: Colors.amber,
      borderRadius: BorderRadius.circular(20),),
    child: OverflowBox(
      maxWidth: double.infinity,
      maxHeight: 200,
      child: AspectRatio(
        aspectRatio: _controller.value.aspectRatio,
        child: VideoPlayer(_controller),
      ),
    ),
  ),
);

“Nice, I’m gonna use it with images!”

Now, hold on right there… Sure, you can do that I guess, however, you may not need it. Why? Well, that’s pretty simple: the Image widget already has mechanisms to achieve either the same, similar or better results. So… There’s no need to do that, you can just try playing around with Image and other widgets.

Conclusion

There’s not so much to say, I love when I learn something new like that because is something that came from my mind: not asking, not googling, just straightforward knowledge that I already have but only pops out in the best moment where I need it.

I hope you enjoyed this pretty simple article, I just wanted to share a small experience in my path learning Flutter. This was originally posted on my personal Telegram channel in a more casual way, so if you want to read it, here it is where it started.

Also, if you want the full code, you can get it here.

Have a nice day :)