Learn

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:

Container(child: Text("I'm in a container"))

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.

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?