FlutterFlow Docs
Search…
Container
The Container widget is like a box that allows you to add a background color, rounded corners, or set some size constraints to a child widget.
You can use Containers to help create your UI structure. Containers can be helpful in dividing the screen into smaller logical parts.

Adding a Container To Your Project

Here's an example of how you can use a Container widget in your project:
    First, Drag and drop the container widget from the Layout Elements tab (in the Widget Panel) or add it directly from the Widget Tree tab.
    Now, move to Property Editor, navigate to the Width and Height. (Under the Container properties) Set the widget to inf and height to 200.
    Just below the width and height section, you will find the Fill Color section. Click on the text Unset, and enter the color code or simply choose it either from Palette or Simple button and then select Use Selected Color.
    Now, add a Column widget inside the container. Set its Main Axis Alignment to Start.
    Add a CircleImage and the Text widget inside the Column from the Base Element section.
    To style the Text widget, select it and move the Property Editor. Under the Text Properties section, Set the Theme Text Style to Title 1 and Text Color to Tertiary.

Changing the properties

The Properties Panel can be used to customize the behavior of your Container widget.

Add Padding

Adding a padding value allows for adjusting the position of the container widget.
To add a Padding:
    Select the Container from the widget tree or from the canvas area.
    Move to the Property Editor and navigate to the Padding section.
    Enter the desired value.
    Click on the Refresh icon
    to reset the values.
Use the
Lock button to change the Left, Top, Right, and Bottom padding all at the same time. Unlocking will allow you to modify each value separately.

Adjust The Alignment

The Alignment property helps you position the widget.
Here are the alignment options:
Horizontal Alignment determines where the widget is placed horizontally inside of its parent. You can adjust this by using the slider or entering a value. A value of -1 will place the widget all the way to the left, while a value of 1 will place the widget all the way to the right.
Vertical Alignment determines where the widget is placed vertically inside of a parent. You can adjust this by using the slider or entering a value. A value of -1 will place the widget all the way to the top, while a value of 1 will place the widget all the way to the bottom.
To change the alignment:
    Select the Container from the widget tree or from the canvas area.
    Move to the Property Editor and navigate to the Alignment section.
    Adjust this by using the slider or entering a value.

Styling The Container

Styling the container helps you develop a component that matches your design. There are many options under Container Properties to style your container including Box shadow, Gradient, Elevation, and more.

Adding A Background Color

To add a background color to the container:
    Select the Container from the widget tree or from the canvas area.
    Move to the Property Editor and navigate to the Fill Color.
    Enter the color code or simply choose it either from Palette or Simple button and then select Use Selected Color.
To add a Gradient color to the container:
    Scroll down to the Gradient section.
    Click on the Add Color twice. Click more to get more colors.
    Enter/Change the color code for added colors.
    Enter the value in the Transition point to adjust the distribution of each color in the linear gradient. The Transition point can only accept a value between 0.0 to 1.0. If you add 3 colors, you can set the Transition Point as 0.0,0.5 and 1.0 for each color respectively.
    Enter the Angle in the degree to change the gradient color direction.

Changing The Shape

Containers can be set to Rectangle or Circle shape. To change the shape of the container:
    Select the Container from the widget tree or from the canvas area.
    Move to the Property Editor and navigate to the Box Shape dropdown under the Container properties.
    Select the desired share from the dropdown.

Changing The Size

To change the size of the container:
    Inside the Property Editor, navigate to the Width and Height. (Under the Container properties).
    There are three ways to set container dimensions:
      To set to an exact size, select PX and enter the desired values.
      To set the dimensions as a % of the screen size, select % and enter the desired value.
      To make the height or width of the container the screen's height or width, just click on the infinity icon (
      ).

Adding A Border

To add a border to the container:
    Inside the Property Editor, head to the Border Color, Border Radius, and Border Width under the Container properties.
    Setting the values for all or the combination of the above properties gets you the desired result.

Elevate The Container

To change the elevation (depth or Z-axis) of the container:
    Inside the Property Editor, move to the Elevation text input under the Container properties.
    Enter the value to see the drop shadow effect below the Container. The Higher value sets the bigger the size of the shadow.

Giving A Shadow To The Container

To add a shadow to the container:
    Inside the Property Editor, navigate to the Box Shadow section.
    Enter the Shadow Color code or simply choose it either from Palette or Simple button.
    To set the size of the shadow, Enter the value in Spread Radius.
    Apply the Blur Radius to blur the shadow border.
    Enter the value for Offset X to move the shadow in horizontal axis. Entering positive value will move the shadow in right direction while the negative value will move the shadow in left direction.
    Enter the value for Offset Y to move the shadow in vertical axis. Entering positive value will move the shadow in downward direction while the negative value will move the shadow in upwards direction.

Setting A Background Image To The Container

To set the background image to the container:
    Inside the Property Editor, scroll down to the Background Image section.
    Choose the Image Type to either Network or Asset.
      If you choose Network, Enter the image URL in the Path input.
      If you choose Asset, Click on Upload Image + button to upload it from your computer.
    Adjust the image that looks best from the Box fit dropdown values.

Aligning The Child

To align a child inside of the container:
    Inside the Property Editor, scroll down to the Child (Last) section.
    Adjust the alignment by using the slider or entering a value.
Some widgets will take up the entire space in Container instead of their set size. This can happen with a Container in Container and with an IconButton in Container. If you encounter this issue, set the child's alignment to zero.
Last modified 9d ago