Container

Fission

Product

▾

Setup

›

›

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::*;
let card = Container::new(Text::new("Billing summary").into())
    .padding_all(16.0)
    .width(320.0)
    .bg(fission::core::op::Color {
        r: 245,
        g: 247,
        b: 250,
        a: 255,
    })
    .border(
        fission::core::op::Color {
            r: 210,
            g: 214,
            b: 220,
            a: 255,
        },
        1.0,
    )
    .border_radius(12.0)
    .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.
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.

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.

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.

Column, Row, Clip, and AspectRatio.