Five things you must know about Container
In this article you will learn 5 important things to keep in mind while working with container widget in flutter.
1) Child & parent of a Container
If the child of a container is null and the constraints of a container is also unbounded or height & width is not specified, the container tends to fill all available space in parent. But also if the parent of container has unbound constraints.
As the container has no height & width specified and child is null. Also parent has unbounded constraints so the container fills the whole scaffold.
but if the container gets the child and has no height & width, it gets wrapped to its child.
If the parent of container is constraints bounded and container has no child and no height & width , the container will squeeze to minimum.
The column is constraint bounded widget. So the container gets to minimum.
2) Color a Container
Color can be given to a container by passing Colors value to color argument in container until and unless there is no box decoration. If box decoration is not null color should be define in BoxDecoration object.
and if its box decoration is defined for styling a container but color is defined straight inside container than it will generate error.
So in this case compiler throws an error.
3) Container for Padding
If you are using container just to give padding for a child and using no more properties of container. Then batter to use Padding widget. Padding widget has padding argument and receives EdgeInsets type value for applying padding.
4) Not resizing Container
Some times on extracting widgets to new files the container do not respond to the given height and width. Simply wrap it in Center, Row, Column or a stack. It will start responding. 😎
5) Border Radius for container having Image
Container can be rounded with the borderRadius argument in BoxDecoration.
the container becomes as
But what if the container contains an Image?
The result would be 🥺
In order to give image an radius we need to wrap container with ClipRRect
And now it will make the borders of image round
Basic but important ones. Play around container directly at https://dartpad.dev/flutter without setting up project for it.
Thanks😋