Flutter's Container: The Ultimate Box Widget
Think of Container as a customizable box for your UI. It's Flutter's multi-tool for combining layout, styling, and positioning in a single widget. Use it to add padding, margins, borders, or background colors.
Why it exists
To provide a single, convenient widget for the most common UI tasks: sizing, spacing, and painting. Instead of nesting multiple widgets for padding, alignment, and coloring, Container bundles them into one powerful and readable tool, simplifying your widget tree.
The mental model
Treat Container as a configurable box. You can put a widget inside it (the child), but the box itself has its own properties. You can paint the box (color or decoration), give it space around the outside (margin), create space on the inside (padding), and set its size (width, height, constraints).
How it works
Container's layout behavior depends on its properties. If it has no child, it tries to be as big as possible (if the parent has a bounded size) or as small as possible (if the parent is unbounded, like a scroll view). If it has a child, it defaults to wrapping that child's size. However, providing width, height, or constraints will override this and force the Container to that size, potentially clipping its child.
When to use it
Use it whenever you need to control the background, size, or spacing of a single widget. It's perfect for adding margins between elements, padding inside a component, setting a background color, or creating rounded corners and borders using a BoxDecoration.
When not to use it
If you only need one specific feature, a more specialized widget is often more efficient. Use Padding for just padding, SizedBox for just a sized empty space, or DecoratedBox for just decoration. A critical rule: you cannot use the color and decoration properties at the same time. If you need a border and a background color, put the color inside the BoxDecoration and pass that to the decoration property.
One canonical example
To create a simple 100x100 red square with 8 pixels of space around it, you would use a Container with a margin of 8, a color of red, and width and height of 100. This demonstrates combining spacing, painting, and sizing in one widget.
Interview question
Which statement accurately describes the behavior when a Flutter Container widget has both its color and decoration properties set?
- a.The decoration property takes precedence, and the color is ignored.
- b.The color property takes precedence, and the decoration is ignored.
- c.The Container will attempt to combine both, potentially leading to unexpected visual results.
- d.The application will encounter an error, as these properties are mutually exclusive.Correct
Why? this is the answer
The card explicitly states that 'you cannot use the color and decoration properties at the same time.' This implies that attempting to set both will result in an error, as they are mutually exclusive. If both are needed, the color should be included within the BoxDecoration.
Just read this? Test yourself on what you have been reading.
Read the original → api.flutter.dev
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on flutter — each one lists the topics its interview covers.
See open roles