Container

One visual region: size, spacing, background, border, and alignment in a single widget.

Learn more: Layout

Import: package:fleury/fleury.dart, or package:fleury/fleury_core.dart in browser code.

Usage

Box

Container(
  width: 30,
  padding: const EdgeInsets.symmetric(horizontal: 1),
  border: const BoxBorder(),
  alignment: Alignment.center,
  child: const Text('Build passed'),
)

Filled layer

// An opaque theme surface: content underneath doesn't show through.
Container.filled(
  padding: const EdgeInsets.all(1),
  child: const Text('Saved'),
)

Floating chrome

// Fill plus the theme's border, for menus, tooltips, and popovers.
Container.framed(
  padding: const EdgeInsets.symmetric(horizontal: 1),
  child: const Text('Container.framed'),
)

Details

From outermost to innermost, a container applies margin, then the width / height size, then the border, then the color fill, then padding, then alignment. So width and height are the outer size including the border, padding insets the child from the border, and the fill covers the padding too.

The plain constructor paints no background, so it can sit over an already-styled surface. Use Container.filled for an opaque theme surface, and Container.framed for floating chrome that needs both a fill and a border.

Constructors

Container()

Parameter	Type	Default	Description
alignment:	Alignment?	—	How the child is positioned inside the container’s content area (inside the border and padding). Null stretches the child to fill that area. Use Alignment.center to center a smaller child in a larger container.
width:	int?	—	Outer width in cells, including border and padding; null leaves it flexible.
height:	int?	—	Outer height in rows, including border and padding; null leaves it flexible.
padding:	EdgeInsets?	—	Empty cells inserted between the border and the child.
margin:	EdgeInsets?	—	Empty cells inserted outside the border, between this container and its parent. Implemented as a wrapping Padding — equivalent to wrapping the whole Container in Padding(padding: margin, ...).
border:	BoxBorder?	—	Draws a four-sided border around child. Adds one cell on each side to the container’s total extent.
color:	Color?	—	Background color painted into every cell inside the border, padding included. Null leaves the underlying surface visible, which suits a container laid over an already-styled background.
child:	Widget?	—	Content inside the optional padding, fill, and border.

Container.filled()

A container that paints an opaque background: color when given, otherwise the theme’s ColorScheme.surface (falling back to a brightness-appropriate default when the scheme leaves it unset).

Reach for this whenever a layer covers content that keeps painting underneath it. Cells are not auto-cleared, so a layer that doesn’t paint every cell it covers lets the content below show through the gaps — the plain Container constructor leaves color null precisely so it can be laid over an already-styled background.

Parameter	Type	Default	Description
alignment:	Alignment?	—	How the child is positioned inside the container’s content area (inside the border and padding). Null stretches the child to fill that area. Use Alignment.center to center a smaller child in a larger container.
width:	int?	—	Outer width in cells, including border and padding; null leaves it flexible.
height:	int?	—	Outer height in rows, including border and padding; null leaves it flexible.
padding:	EdgeInsets?	—	Empty cells inserted between the border and the child.
margin:	EdgeInsets?	—	Empty cells inserted outside the border, between this container and its parent. Implemented as a wrapping Padding — equivalent to wrapping the whole Container in Padding(padding: margin, ...).
border:	BoxBorder?	—	Draws a four-sided border around child. Adds one cell on each side to the container’s total extent.
color:	Color?	—	Background color painted into every cell inside the border, padding included. Null leaves the underlying surface visible, which suits a container laid over an already-styled background; Container.filled and Container.framed fill with the theme’s surface instead.
child:	Widget?	—	Content inside the optional padding, fill, and border.

Container.framed()

Filled and framed: Container.filled’s opaque background plus a border — the theme’s ThemeData.borderStyle unless you pass one.

This is the standard skin for floating chrome (tooltips, menus, dropdowns, toasts), which needs both halves: the frame to read as a distinct layer, and the fill so the app beneath doesn’t bleed through it. Note it is filled as well as framed — that is the point.

It is only a skin: it does not position itself and has no opinion on focus or selection. Anchor it with Follower, pin it with Align, mount it in an OverlayEntry, and mark it non-selectable with SelectionArea.disabled when its text is chrome rather than content.

Takes the same parameters as Container.filled().

Source

Container is defined in packages/fleury/lib/src/widgets/basic.dart.

Category: Layout · All widgets

Live demo

container_example.dart

Restart Run Expand

Example · editable Revert Format

class _ContainerFillExampleState extends State<_ContainerFillExample> {
  bool _open = false;

  void _toggle() => setState(() => _open = !_open);

  @override
  Widget build(BuildContext context) {
    // The trigger and the wall stay at a fixed position in the tree so the
    // button keeps focus across a toggle; only the framed layer comes and
    // goes.
    final Widget behind = Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Button(
          text: _open ? 'Hide layer' : 'Show layer',
          autofocus: true,
          onPressed: _toggle,
        ),
        for (var i = 0; i < 6; i++) const Text('live content behind the layer'),
      ],
    );
    return KeyBindings(
      bindings: <KeyBinding>[
        if (_open)
          KeyBinding(
            KeySequence.escape,
            label: 'Close',
            onTrigger: (_) => _toggle(),
          ),
      ],
      child: Stack(
        children: <Widget>[
          behind,
          if (_open)
            Align(
              alignment: Alignment.center,
              child: Container.framed(
                padding: const EdgeInsets.symmetric(horizontal: 1),
                // Deliberately ragged: the shorter line leaves interior
                // cells the content never writes — exactly the cells that
                // would show the wall through an unfilled Container.
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: const <Widget>[
                    Text('Container.framed'),
                    Text(
                      'opaque fill + theme border',
                      style: CellStyle(dim: true),
                    ),
                  ],
                ),
              ),
            ),
        ],
      ),
    );
  }
}

Live preview

Live · interactive

click & type to interact ⓘ how this demo runs ⛶ Expand