Skip to main content

Status Bar

The status bar is an optional command and information surface below the grid. It uses the same ordered item model and start/center/end placement zones as the toolbar, but is usually better suited to dataset state, record position, work progress, paging information, and compact navigation commands.

Status bar composition
Loading FDC sample…
FdcGrid(
  dataSet: customers,
  toolbar: const FdcGridToolbar(visible: false),
  statusBar: FdcGridStatusBar(
    visible: true,
    items: <FdcGridItem>[
      const FdcGridStatusText(
        placement: FdcGridItemPlacement.start,
      ),
      FdcGridButton(
        id: 'first-record',
        placement: FdcGridItemPlacement.center,
        icon: Icons.first_page,
        tooltip: 'First record',
        onPressed: customers.first,
      ),
      FdcGridButton(
        id: 'last-record',
        placement: FdcGridItemPlacement.center,
        icon: Icons.last_page,
        tooltip: 'Last record',
        onPressed: customers.last,
      ),
      const FdcGridProgressBar(
        placement: FdcGridItemPlacement.end,
      ),
    ],
  ),
  columns: customerColumns,
);

The sample keeps live dataset status at the start, centers the First and Last record navigation actions, and places work progress at the end. Move through the grid or use the centered navigation buttons and watch the status text update.

Enable the status bar​

The status bar is hidden by default. Enable it explicitly:

FdcGrid(
  dataSet: customers,
  statusBar: const FdcGridStatusBar(
    visible: true,
  ),
  columns: customerColumns,
)

With no custom items, the default status bar contains:

  • FdcGridStatusText() at the start;
  • FdcGridProgressBar() at the end.

Compose the item list​

Define items when you need a custom layout:

FdcGrid(
  dataSet: customers,
  statusBar: FdcGridStatusBar(
    visible: true,
    items: <FdcGridItem>[
      const FdcGridStatusText(
        placement: FdcGridItemPlacement.start,
      ),
      FdcGridButton(
        placement: FdcGridItemPlacement.center,
        icon: Icons.first_page,
        tooltip: 'First record',
        onPressed: customers.first,
      ),
      FdcGridButton(
        placement: FdcGridItemPlacement.center,
        icon: Icons.last_page,
        tooltip: 'Last record',
        onPressed: customers.last,
      ),
      const FdcGridProgressBar(
        placement: FdcGridItemPlacement.end,
      ),
    ],
  ),
  columns: customerColumns,
)

As with the toolbar, list order is preserved inside each placement zone.

Dataset status text​

FdcGridStatusText is runtime-aware. It builds a compact line from the current dataset state, including:

  • current record position and record count;
  • dataset state such as browse, edit, insert, loading, or applying updates;
  • filtered state when a filter is active;
  • sorted state when sorting is active.

For paged datasets, record position uses the global paging offset and total record count rather than only the locally loaded page size.

Because the status bar listens to the dataset, the text updates as the user navigates or the dataset lifecycle changes.

Work progress​

FdcGridProgressBar binds to dataset work state:

const FdcGridProgressBar(
  placement: FdcGridItemPlacement.end,
  width: 120,
)

The item is intended for dataset work such as loading, searching, filtering, sorting, paging, or applying updates. Use its optional style to override progress presentation locally.

Keeping progress inside the status bar is useful when the grid should remain visible while work is running.

Placement zones​

The status bar uses the same shared layout model as the toolbar:

ZoneTypical content
StartFdcGridStatusText, record information, primary state
Centercompact contextual text or custom status widgets
Endprogress, paging, navigation, compact actions

The sample uses all three zones: status at the start, navigation in the center, and progress at the end. This makes the placement model immediately visible.

Paging in the status bar​

Paging controls are shared FdcGridItem implementations, so they can be placed directly in the status bar:

FdcGridStatusBar(
  visible: true,
  items: <FdcGridItem>[
    const FdcGridStatusText(
      placement: FdcGridItemPlacement.start,
    ),
    const FdcGridPagingRecordInfo(
      placement: FdcGridItemPlacement.end,
    ),
    FdcGridPageSizeSelector(
      placement: FdcGridItemPlacement.end,
      options: const <int>[25, 50, 100, 250],
    ),
    FdcGridPagingNavigator.numbered(
      placement: FdcGridItemPlacement.end,
      visiblePageCount: 5,
    ),
  ],
)

This allows screen-specific composition. A dense desktop CRUD screen might place search and export in the toolbar while keeping record range, page size, and navigation below the grid.

Paging navigator, record-info, and page-size items are suppressed in infinite paging mode because page-based navigation is not applicable there.

Mixing information and commands​

The status bar can host the same generic items as the toolbar, including:

  • FdcGridButton
  • FdcGridSeparator
  • FdcGridSpacer
  • FdcGridCustomItem
  • paging items

Use the status bar for compact, grid-local commands. A good rule is to keep high-frequency creation, search, and export actions in the toolbar, while the status bar carries state, progress, paging, and secondary navigation.

Responsive behavior​

The status bar uses the same responsive three-zone layout as the toolbar. As width becomes constrained:

  1. center-zone items are dropped first;
  2. end-zone items nearest the center are removed next;
  3. start-zone items nearest the center are removed last.

This is why the most important status text usually belongs at the outer start edge, while optional contextual text works well in the center zone.

Height and styling​

Set height only when a fixed status-bar height is required:

const FdcGridStatusBar(
  visible: true,
  height: 34,
)

Use style for local background, text, padding, and related presentation. For consistent application-wide styling, prefer the status-bar section of the FDC grid theme.