We have a widget but we want to modify how it’s presented. Maybe we want it wider, or to have more padding, or moved to the left. How do we do this in Flutter?
The Container widget is a powerful tool to manipulate the presentation of our content. Creating a Container box around a child widget allows us to modify parameters such as colors, borders, and padding to change the way the widget is displayed.
We use a Container widget by placing it around a child widget, such as in the following example:
Adding just an empty Container widget around a child won’t do anything, we need to add parameters.
When we create the Container, we use constructor parameters like the following to specify how we want to modify the child widget’s presentation. We might use only one parameter, or we could use several at a time:
| Constructor parameter | Purpose |
|---|---|
alignment |
Optional parameter to change the alignment of the child widget within the container. |
child |
Mandatory parameter. Specifies the widget to be contained inside this container. |
decoration |
Optional parameter to decorate the container using a border, background color, shading etc. |
margins |
Optional parameter to specify the space around the outside of the container. |
padding |
Optional parameter to specify the space inside the container around the child widget. |
transform |
Optional parameter to perform a visual transformation, for example turn it 90 degrees. |
width, height |
Optional parameters to specify the widget and height of the container. |
Let’s walk through the ways we can use the Container widget to change the way content is presented.
Instructions
This example showcases some of the ways the Container widget can be used to change the way that the content is presented, try modifying the values to see their effect.