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:
The AspectRatio widget with the video is inside of a 200×200 Container, the yellow background helps to notice whatâs going on.
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:
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?
As you can see, that video is definitely NOT an 200×200 box as itâs parentâŠ
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?
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:
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:
As you can see, that video is definitely NOT in a 200×200 aspect ratio as itâs parentâŠ
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âŠ
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 đ
