Skip to main content

Theming

FDC ships with coordinated grid and editor theme presets. You can let FDC follow the active Material brightness automatically, choose an explicit built-in preset for the whole application, override one subtree, or override a single grid/editor.

Built-in themes​

Grid presets are exposed through FdcGridThemes, and matching editor presets through FdcEditorThemes.

PresetGridEditorsTypical use
LightFdcGridThemes.lightFdcEditorThemes.lightSoft neutral light application surfaces
WhiteFdcGridThemes.whiteFdcEditorThemes.whiteClean white data-entry and admin screens
DarkFdcGridThemes.darkFdcEditorThemes.darkStandard dark application surfaces
BlackFdcGridThemes.blackFdcEditorThemes.blackNear-black, high-contrast dark UI

The grid and editor presets are separate because applications sometimes need to mix scopes deliberately, but the usual approach is to choose matching variants.

Automatic light and dark behavior​

You do not have to configure an FDC theme just to support Material light and dark modes. Without an explicit FDC theme, grids and editors follow ThemeData.brightness:

  • Material light brightness resolves to the built-in light preset;
  • Material dark brightness resolves to the built-in dark preset.
MaterialApp(
  theme: ThemeData.light(),
  darkTheme: ThemeData.dark(),
  themeMode: ThemeMode.system,
  home: const CustomersPage(),
)

This is the simplest setup when the built-in FDC light and dark presets fit the application.

App-level theme​

Use FdcApp.theme when the entire application should use an explicit FDC visual preset.

FdcApp(
  theme: const FdcThemeData(
    grid: FdcGridThemes.white,
    editor: FdcEditorThemes.white,
  ),
  child: app,
)

A dark application can use the matching dark pair:

FdcApp(
  theme: const FdcThemeData(
    grid: FdcGridThemes.dark,
    editor: FdcEditorThemes.dark,
  ),
  child: app,
)

App-level theming is usually the right starting point because the grid and standalone editors stay visually coordinated.

Subtree override​

Use FdcTheme when one part of the widget tree needs a different FDC preset from the rest of the application.

FdcTheme(
  data: const FdcThemeData(
    grid: FdcGridThemes.black,
    editor: FdcEditorThemes.black,
  ),
  child: const OperationsDashboard(),
)

Nested FDC theme scopes merge with their parent scope, so a subtree can override only the section it needs.

Per-grid override​

A local grid theme has the highest grid-theme precedence and is useful for deliberate exceptions.

FdcGrid(
  dataSet: customers,
  theme: FdcGridThemes.white,
  style: const FdcGridStyle(),
  columns: customerColumns,
)

Use a local override sparingly. Repeating local theme configuration across many grids is harder to maintain than setting one app or subtree theme.

Theme resolution order​

For grids, the effective theme is resolved in this order:

  1. FdcGrid.theme local override;
  2. nearest FdcTheme / FdcApp.theme grid section;
  3. optional Material FdcGridTheme extension;
  4. built-in light or dark preset selected from Material brightness.

Editors follow the same model with their editor equivalents.

Component-level styling​

Themes provide the visual baseline. Header, toolbar, summary row, status bar, cell indicator, column groups, and individual columns also expose focused style/configuration objects.

Prefer shared theme settings for application-wide appearance and local styles for intentional exceptions, such as one compact dashboard grid or one emphasized financial summary row.

Formatting​

Grid cells, inline editors, header filters, and toolbar search share the FDC formatting contract. Use app-level format settings for a common locale or override them per grid when one screen needs different presentation rules.

FdcGrid(
  dataSet: customers,
  formatSettings: const FdcFormatSettings(
    locale: 'en_US',
    dateFormat: 'MM/dd/yyyy',
    timeFormat: 'h:mm a',
    dateTimeFormat: 'MM/dd/yyyy h:mm a',
    decimalSeparator: '.',
    thousandSeparator: ',',
  ),
  columns: customerColumns,
)

Formatting is independent from the visual preset. Changing from white to dark, for example, does not change date or number semantics.

Start with automatic Material brightness behavior or one app-level FdcThemeData. Add subtree overrides only for genuinely different application areas, then use local component styles for small, purposeful exceptions.