Panel

A bordered pane with a title row — the standard framing for dashboard meters, file-manager panes, log surfaces, and any multi-pane screen.

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

Usage

Row(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: <Widget>[
    Expanded(
      child: Panel(
        title: 'CPU',
        trailing: Text('42%'),
        focused: true,
        child: Sparkline(data: <num>[3, 5, 4, 8, 6, 9, 7, 5, 8, 6]),
      ),
    ),
    Expanded(
      child: Panel(
        title: 'MEM',
        trailing: Text('61%'),
        child: Sparkline(data: <num>[6, 6, 5, 7, 7, 8, 6, 7, 8, 8]),
      ),
    ),
  ],
)

Details

The border and title resolve from the ambient Theme: at rest the border is muted and the title is bold in the normal text color; when the pane is active, both take the ColorScheme.primary accent, so the user can see where input goes. Active-ness is detected, not declared — the panel watches the focus tree (FocusDetector) and accents itself while focus is anywhere inside it, including inside a LogRegion, DataTable, or other focusable widget in its body. Nested panels all accent: focus in an inner pane lights that pane and every pane around it.

Set focused only to override that: true/false pins the chrome regardless of where focus is, which is what a static showcase or a pane whose “active” notion isn’t focus wants. The panel’s semantics still report where focus is.

The panel is a semantic region named by title (override with semanticLabel), so tests and agents can address each pane directly.

By default the child expands to fill the remaining panel height (expandChild true) — right for panes sized by the surrounding layout (e.g. inside Expanded). Set expandChild false for intrinsically-sized content, letting the panel hug its child.

Constructors

Panel()

Parameter	Type	Default	Description
title:	String	required	Title shown on the panel’s first row, styled by the theme.
child:	Widget	required	The panel body.
trailing:	Widget?	—	Optional right-aligned widget on the title row (e.g. a status string).
focused:	bool?	—	Pins the chrome: true draws the border and title in the accent and false draws them at rest, wherever focus is. Null (the default) follows focus, accenting them while focus is anywhere inside the panel. More
expandChild:	bool	true	When true (default) the child is wrapped in Expanded so it fills the panel; set false for intrinsically-sized content.
semanticLabel:	String?	—	Semantic label (the accessibility name; not rendered). Defaults to title.
addRepaintBoundary:	bool	true	Wrap the panel body in a RepaintBoundary (default true) so a panel whose content did not change blits its cached cells instead of re-walking its paint chain. More

• focused: Only the chrome is pinned: the panel’s semantic region reports focus exactly while focus is inside it, as an unpinned panel’s does.

• addRepaintBoundary: Panels are the shape this pays for: chrome that is expensive to paint and usually static, sitting beside something that churns. The cost is one reused cache buffer per panel, bounded by the panel’s own size.

  Turn off for a panel whose body changes every frame anyway, where the cache would be filled and discarded without ever being blitted.

Source

Panel is defined in packages/fleury/lib/src/catalog/panel.dart.

Category: Layout · All widgets

Live demo

panel_example.dart

Restart Run Expand

Example · editable Revert Format

Widget example() => Row(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: <Widget>[
    Expanded(
      child: Panel(
        title: 'CPU',
        trailing: Text('42%'),
        focused: true,
        child: Sparkline(data: <num>[3, 5, 4, 8, 6, 9, 7, 5, 8, 6]),
      ),
    ),
    Expanded(
      child: Panel(
        title: 'MEM',
        trailing: Text('61%'),
        child: Sparkline(data: <num>[6, 6, 5, 7, 7, 8, 6, 7, 8, 8]),
      ),
    ),
  ],
);

Live preview

Live

ⓘ how this demo runs ⛶ Expand