FlutterFlow Docs
Troubleshooting GuidesDocs Feedback
Search
⌃K
Links

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 Container widget

Here's an example of how you can use a Container widget in your project:
  1. 1.
    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.
  2. 2.
    Now, move to Property Editor, and navigate to the Width and Height. (Under the Container properties) Set the widget to inf and height to 200.
  3. 3.
    Just below the width and height section, you will find the Fill Color section. Click on the text Unset, enter the color code or choose it from Palette or Simple button and then select Use Selected Color.
  4. 4.
    Now, add a Column widget inside the container. Set its Main Axis Alignment to Start.
  5. 5.
    Add a CircleImage and the Text widget inside the Column from the Base Element section.
  6. 6.
    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 the Text Color to Tertiary.

Customizing

You can customize the appearance of this widget using the various properties available under the properties panel.

Add padding

See how to add padding.

Adjust alignment

Changing shape

Containers can be set to Rectangle or Circle shape. To change the shape of the container, select the Container widget, move to the properties panel, and select the Rectangular Shape or Circular Shape option (under Container Properties).
Changing shape

Adding background color

To add a background color to the container:
  1. 1.
    Select the Container from the widget tree or the canvas area.
  2. 2.
    Move to the Property Editor and navigate to the Fill Color.
  3. 3.
    Enter the color code or choose it from Palette or Simple button and then select Use Selected Color.

Adding gradient

To add a Gradient color to the container:
  1. 1.
    Scroll down to the Gradient section.
  2. 2.
    Click on the Add Color twice. Click more to get more colors.
  3. 3.
    Enter/Change the color code for added colors.
  4. 4.
    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 three colors, you can set the Transition Point as 0.0,0.5, and 1.0 for each color, respectively.
  5. 5.
    Enter the Angle in the degree to change the gradient color direction.
​

Changing size

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

Limiting size

Sometimes you don't set the height and width of the container explicitly and allow it to be the size of its child widget. If you do so, you may find that the layout is inconsistent across different screen sizes and devices. To overcome this, you can limit the size of the container up to max width and height.
To limit the container size, select the Container widget, move to the properties panel, and enter the values in the Max W and Max H properties.
Limiting size

Adding border

To add a border to the container:
  1. 1.
    Inside the Property Editor, head to the Border Color, Border Radius, and Border Width under the Container properties.
  2. 2.
    ​Here are further instructions on adding a border.

Clipping content

You can clip/cut the contents (i.e., child widget) of the container in a rounded rectangular shape. You could also achieve a similar effect by just adding a Border Radius, but the benefit you get here is it improves the performance of your app by not rendering or drawing pixels that are outside the rectangle.
To clip the content, select the Container widget, move to the properties panel, enable the Clip Content toggle and add the Border Radius.
Clipping content

Elevate container

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

Giving shadow

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

Setting background image

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

Aligning child

To align a child inside of the container:
  1. 1.
    Inside the Property Editor, scroll down to the Child (Last) section.
  2. 2.
    Adjust the alignment by using the slider or entering a value.
Some widgets will take up the entire space in the 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.

Set color dynamically

See how to set a color from variable to any color property of this widget.

Adding Implicit Animation

In Implicit Animation, the widget automatically animates to a new properties value when they are updated. For example, the container widget animates whenever you change its size and colors.
Implicit Animation is recommended only when you want to run the animation once (after the properties are changed). To run the animation multiple times or add a custom one, consider adding the animation yourself.
Here's an example of how it looks when you update the container properties with and without Implicit Animation.
Without Implicit Animation
With Implicit Animation
Without Implicit Animation
With Implicit Animation
To add implicit animation:
  1. 1.
    Move to the properties panel, and turn on the Implicit Animated toggle.
  2. 2.
    Set the Animation Curve to desired one among the Ease In, Ease Out, Ease In Out, Bounce, Elastic, and Linear. This tells how an animation should behave over a specified duration. You can try each one to see which one fits better.
  3. 3.
    The Duration value specifies the time the animation will run for. Note that this value should be in milliseconds (e.g., 1000ms = 1 second).
  4. 4.
    Now, whenever you update the container properties such as Width, Height, Fill Color, and Border Color, the container will animate to a new value automatically.
Adding Implicit Animation

Adding action

To perform any action on click of the Container, add an Action in FlutterFlow. You can find the instructions on adding the Action here.

Video guide

If you prefer watching a video tutorial, here's the one for you:
Previous
Layout Elements
Next
Row
Last modified 25d ago