Skip to main content

Basic Usage

Basic grid
Loading FDC sample…
FdcGrid(
  dataSet: customers,
  columns: const [
    FdcIntegerColumn(fieldName: 'customer_id', width: 96),
    FdcTextColumn(fieldName: 'company_name', width: 210),
    FdcTextColumn(fieldName: 'contact_name', width: 165),
    FdcTextColumn(fieldName: 'city', width: 135),
    FdcTextColumn(fieldName: 'state', width: 90),
  ],
);

A grid needs a dataset and, for explicit control over presentation, a list of columns.

FdcGrid(
  dataSet: customers,
  options: const FdcGridOptions(
    autoEdit: true,
  ),
  statusBar: const FdcGridStatusBar(visible: true),
  columns: const [
    FdcIntegerColumn<dynamic>(
      fieldName: 'id',
      width: 80,
      readOnly: true,
    ),
    FdcTextColumn<dynamic>(
      fieldName: 'company',
      width: 240,
    ),
    FdcTextColumn<dynamic>(
      fieldName: 'city',
      width: 160,
    ),
  ],
)

When columns is empty, the grid can generate default columns from compatible dataset field metadata. Explicit columns are preferable once the screen needs stable widths, ordering, labels, filtering policy, summaries, callbacks, or custom presentation.

Grid options​

FdcGridOptions controls interaction and geometry defaults:

const FdcGridOptions(
  readOnly: false,
  allowColumnFiltering: true,
  allowColumnResize: true,
  autoEdit: true,
  confirmDelete: true,
  defaultColumnWidth: 160,
  rowHeight: 40,
  verticalScrollMode: FdcGridVerticalScrollMode.recordScroll,
  horizontalScrollMode: FdcGridHorizontalScrollMode.columnSnap,
  scrollbars: FdcGridScrollbars.both,
)

Use readOnly: true when the whole grid is observational. For per-column rules, use readOnly on individual columns or canEditRow / canEditColumn callbacks.

Toolbar and status bar​

The toolbar is visible by default and includes the built-in search bar. The status bar is hidden by default.

FdcGrid(
  dataSet: customers,
  toolbar: const FdcGridToolbar(visible: true),
  statusBar: const FdcGridStatusBar(visible: true),
)

Both regions accept ordered item collections when a screen needs custom command composition.