Container
Container is the workhorse wrapper in Fission.
It is the widget you reach for when one child needs sizing constraints, padding, background fill, border, corner radius, or shadow. In practical app code, that means cards, panels, chips, banners, framed media, and padded sections often begin with Container.
Use Container when you need to shape or decorate a single child. Do not use it as a multi-child layout primitive by itself. If the content has multiple siblings, build those siblings with Row, Column, or another layout widget, and then wrap the result in a Container.
Example
use fission::prelude::*;
const SUMMARY_MIN_WIDTH: f32 = 280.0;
const SUMMARY_MAX_WIDTH: f32 = 520.0;
let (_ctx, view) = fission::build::current::<BillingState>();
let tokens = &view.env().theme.tokens;
let card = Container::new(Text::new(TextContent::Key("billing.summary".into())))
.padding_lengths(Length::symmetric(
Length::points(tokens.spacing.l),
Length::points(tokens.spacing.m),
))
.width_length(Length::clamp(
Length::points(SUMMARY_MIN_WIDTH),
Length::percent(42.0),
Length::points(SUMMARY_MAX_WIDTH),
))
.bg(tokens.colors.surface)
.border(tokens.colors.border, 1.0)
.border_radius(tokens.radii.large)
.into();
Field table
Field | Type | Meaning | Notes / default behavior |
|---|---|---|---|
id | Option<WidgetId> | Stable widget identity. | Defaults to None. |
child | Option<Widget> | The wrapped child widget. | Defaults to None. Container::new(...) fills this for you. |
width | Option<f32> | Fixed width. | Defaults to None. |
height | Option<f32> | Fixed height. | Defaults to None. |
min_width | Option<f32> | Minimum width constraint. | Defaults to None. |
max_width | Option<f32> | Maximum width constraint. | Defaults to None. |
min_height | Option<f32> | Minimum height constraint. | Defaults to None. |
max_height | Option<f32> | Maximum height constraint. | Defaults to None. |
padding | [f32; 4] | Inner padding in [left, right, top, bottom] order. | Defaults to [0.0; 4]. |
flex_grow | f32 | Extra space the container may absorb. | Defaults to 0.0. |
flex_shrink | f32 | How much the container may shrink in tight layouts. | Defaults to 1.0. |
box_style | BoxStyle | Typed sizing, margin, padding, alignment, overflow, aspect ratio, positioning, grid placement, and flex data. | Defaults to BoxStyle::default(). |
margin | [f32; 4] | Legacy point-based outer spacing in [left, right, top, bottom] order. | Defaults to [0.0; 4]. |
background_fill | Option<Fill> | Background fill for the container box. | Defaults to None. |
background_color | Option<Color> | Legacy solid-color background field. | Usually set indirectly by .bg(...). |
border_color | Option<Color> | Border color. | Defaults to None. |
border_width | f32 | Border thickness. | Defaults to 0.0. |
border_radius | f32 | Corner radius. | Defaults to 0.0. |
shadow | Option<BoxShadow> | Optional drop shadow. | Defaults to None. |
shadows | Vec<BoxShadow> | Ordered additional shadows. | Defaults to an empty list. |
backdrop_filter | Option<BackdropFilter> | Filter applied to already-painted content behind the container. | Defaults to None. |
Layout and rendering behavior
Container lowers to a box layout node and, when needed, a paint layer for background, border, radius, and shadow. That means it handles both spacing and decoration in one place.
The padding order is worth calling out because it is explicit: [left, right, top, bottom]. If you come from systems that use top-right-bottom-left ordering, double-check your values.
Prefer the typed layout helpers for new responsive code:
Helper | Use it for |
|---|---|
width_length / height_length | Length-based preferred size. |
min_width_length / max_width_length | Responsive bounds without manual viewport math. |
padding_lengths / margin_lengths | Fixed, percentage, viewport, or intrinsic edge sizing. |
align_child | Child alignment inside the content rectangle. |
aspect_ratio | Media, cards, and embeds that must preserve a ratio. |
positioned_lengths | Absolute positioning with typed offsets. |
grid_cell / grid_span | Placement inside a parent grid. |
clip_overflow | Clip painted content and descendants to the container bounds. |
bg_fill | Solid or gradient background fills. |
shadows / backdrop_blur | Design-fidelity effects. |
Specific advice
Reach for Container early, but not everywhere. It is easy to overuse as a substitute for clearer layout intent. If the main job is stacking children, start with Row or Column and add a Container around the result only when decoration or constraints actually matter.
A strong pattern for cards and sections is: build content with Column, then wrap that column in Container for padding and visual styling.
Production checklist
For Container, review the fields that change behavior before treating the widget as finished: id, child, width, height, min_width, max_width. The goal is to make the product rule visible in state and actions, not hidden inside ad-hoc construction code.
•
If this widget appears inside an interactive flow, keep the surrounding action binding in the parent component and test that the flow still has one clear reducer path.
•
When child widgets are generated from data, give reordered or filtered rows an explicit WidgetId so retained local state and scroll behavior do not drift between items.
•
Set id only when identity must be stable across filtering, reordering, diagnostics, or tests; otherwise let Fission derive identity from structure.
•
Check the semantics tree for the user-facing label or role that makes this widget understandable without relying only on pixels.
•
Prefer parent layout and design-system sizing first; use explicit size or spacing fields when the product layout requires that constraint on this widget specifically.
•
Add at least one component or harness test that confirms the visible text, semantic role, action dispatch, and layout constraint that matter for this widget in context.
If a screen starts repeating the same Container setup, extract a named component around this widget. That keeps the reference API small while making product code easier to read and safer for generated code to copy.
Related
Column, Row, Clip, and AspectRatio.
Previous
Composite
Next
Responsive