LayoutBuilder

Builds its child from the constraints it actually receives, so layout can adapt to the available space — a sidebar that collapses below a width, a list that switches to a grid when wide, etc.

Learn more: Layout

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

Usage

LayoutBuilder(
  builder: (context, constraints) =>
      (constraints.maxCols ?? 0) > 60 ? Wide() : Narrow(),
)

Details

The builder runs during layout rather than build. It runs again when the incoming constraints change, when the parent rebuilds this widget, or when something the builder reads changes, such as a scope like MediaQuery.of(context) or an animation’s value; otherwise the child it built last time is kept, so the builder doesn’t run on every frame. An exception in the builder is handled like one thrown by a build method: the error widget takes the child’s place.

An axis can be unbounded: constraints.maxCols or maxRows is null for an inflexible child of a Row or Column, for example. A builder that sizes from that axis needs a bound, so wrap this widget in Expanded or SizedBox. With assertions enabled, a child that comes out zero-sized on an unbounded axis while non-empty on the other throws a StateError that says so.

Constructors

`LayoutBuilder()`

Parameter	Type	Default	Description
`builder:`	`LayoutWidgetBuilder`	required	Creates the child for the constraints received during the current layout.

Source

LayoutBuilder is defined in packages/fleury/lib/src/widgets/layout_builder.dart.

Category: Layout · All widgets

Example · editable

/// Two panes side by side when there is room, stacked when there is not.
class _Workspace extends StatelessWidget {
  const _Workspace();

  @override
  Widget build(BuildContext context) {
    const files = Panel(
      title: 'Files',
      child: Padding(
        padding: EdgeInsets.all(1),
        child: Text('README.md\nlib/\ntest/'),
      ),
    );
    const preview = Panel(
      title: 'Preview',
      child: Padding(
        padding: EdgeInsets.all(1),
        child: Text('# Fleury\n\nA framework for terminal apps.'),
      ),
    );
    return LayoutBuilder(
      builder: (context, constraints) {
        final wide = (constraints.maxCols ?? 0) >= 60;
        return Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Text(
              wide ? 'WIDE · TWO PANES' : 'NARROW · STACKED',
              style: const CellStyle(bold: true),
            ),
            const SizedBox(height: 1),
            Expanded(
              child: wide
                  ? const Row(
                      crossAxisAlignment: CrossAxisAlignment.stretch,
                      children: [
                        Expanded(flex: 2, child: files),
                        SizedBox(width: 1),
                        Expanded(flex: 3, child: preview),
                      ],
                    )
                  : const Column(
                      crossAxisAlignment: CrossAxisAlignment.stretch,
                      children: [
                        Expanded(child: files),
                        SizedBox(height: 1),
                        Expanded(child: preview),
                      ],
                    ),
            ),
          ],
        );
      },
    );
  }
}

class _ResizableWorkspaceState extends State<_ResizableWorkspace> {
  // The buttons stand in for a resize: in an app, the terminal or the
  // surrounding layout decides how wide the workspace is.
  var _width = 68;

  @override
  Widget build(BuildContext context) => Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Row(
        children: [
          Button(
            text: 'Narrow',
            autofocus: true,
            onPressed: () => setState(() => _width = 42),
          ),
          const SizedBox(width: 1),
          Button(text: 'Wide', onPressed: () => setState(() => _width = 68)),
        ],
      ),
      const SizedBox(height: 1),
      Expanded(
        child: SizedBox(width: _width, child: const _Workspace()),
      ),
    ],
  );
}

Live preview

Live · interactive

click & type to interact ⓘ how this demo runs