Skip to main content

FdcApp

FdcApp is the application- or subtree-level configuration scope for FD Components.

It centralizes defaults for:

  • FDC theme data,
  • translations,
  • locale-aware format settings,
  • export style defaults,
  • focus traversal behavior.

FdcApp is optional. Components can still operate without it, using locale-derived format settings, built-in translation fallback, default export style, and default focus behavior.

Basic setup​

Place FdcApp inside the Flutter app's localization/theme context and above the FDC screens that should inherit its configuration:

MaterialApp(
  locale: const Locale('de', 'DE'),
  home: FdcApp(
    theme: const FdcThemeData(
      grid: FdcGridThemes.white,
      editor: FdcEditorThemes.light,
    ),
    child: const CustomersPage(),
  ),
)

A single application-wide instance is common, but FdcApp can also scope a feature subtree:

FdcApp(
  formatSettings: const FdcFormatSettings(
    decimalSeparator: ',',
    thousandSeparator: '.',
  ),
  child: const AccountingModule(),
)

Descendant FDC components read the nearest scope.

Configuration precedence​

For format settings:

explicit FdcApp.formatSettings
→ active Flutter locale resolved by FdcApp.formatResolver
→ FDC locale preset or neutral technical fallback

For translations:

explicit FdcApp.translations
→ registered FdcLocalizations translation bundle
→ active Flutter locale resolved by FdcApp.translationResolver
→ English fallback

Local component settings can still override component-specific presentation behavior where that API is exposed.

Format settings​

Let FDC resolve formatting from the active Flutter locale:

FdcApp(
  child: const OrdersPage(),
)

Or force an explicit format preset:

FdcApp(
  formatSettings: FdcFormatSettings.fromLocale(
    const Locale('fr', 'FR'),
  ),
  child: const OrdersPage(),
)

Or provide exact application rules:

FdcApp(
  formatSettings: const FdcFormatSettings(
    locale: 'en_US',
    dateFormat: 'MM/dd/yyyy',
    timeFormat: 'h:mm a',
    decimalSeparator: '.',
    thousandSeparator: ',',
    showThousandSeparator: true,
  ),
  child: const OrdersPage(),
)

See Format Settings for resolver behavior and locale presets.

Translations​

Use a built-in translation bundle explicitly:

FdcApp(
  translations: FdcTranslations.deDe(),
  child: const CustomersPage(),
)

Or allow the active Flutter locale to select the built-in FDC bundle through the default translation resolver.

See Localization and Translations for built-in languages, Flutter localization integration, and custom resolvers.

Theme​

theme applies FdcThemeData to the subtree:

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

The theme is scoped, so a nested feature can use a different FDC theme without changing the Material theme for the whole application.

See Grid Theming.

Export defaults​

exportStyle supplies app/subtree defaults for format-aware export writers:

FdcApp(
  exportStyle: FdcExportStyle(
    formats: {
      customFormat: customStyle,
    },
  ),
  child: const ReportsPage(),
)

Explicit per-export style passed to export orchestration takes precedence over app defaults.

See Export Overview and PDF Export for the full export pipeline and style precedence rules.

Focus behavior​

focus configures FDC focus traversal defaults:

FdcApp(
  focus: const FdcFocusOptions(
    // Application-wide FDC focus options.
  ),
  child: const DataEntryPage(),
)

For a smaller subtree, FdcFocusScope can override the inherited focus behavior locally.

See Focus Management for traversal policies, local overrides, and traversal-group boundaries.

Reading resolved settings​

Application code can read the effective values:

final formats = FdcApp.formatsOf(context);
final translations = FdcApp.translationsOf(context);
final exportStyle = FdcApp.exportStyleOf(context);

The regular ...Of(context) methods subscribe to inherited configuration changes and are appropriate in build, dependency-driven update paths, and callbacks whose owner should react to configuration changes.

Non-listening variants are available for initialization paths:

final formats = FdcApp.formatsOfNonListening(context);
final translations = FdcApp.translationsOfNonListening(context);
final exportStyle = FdcApp.exportStyleOfNonListening(context);

The non-listening APIs are intended for cases such as an initial controller value in initState; regular UI update code should use the listening variants.

A complete locale-aware setup​

MaterialApp(
  locale: currentLocale,
  supportedLocales: FdcLocalizations.supportedLocales,
  localizationsDelegates: const [
    FdcLocalizations.delegate,
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
    GlobalCupertinoLocalizations.delegate,
  ],
  home: FdcApp(
    theme: isDark
        ? const FdcThemeData(
            grid: FdcGridThemes.dark,
            editor: FdcEditorThemes.dark,
          )
        : const FdcThemeData(
            grid: FdcGridThemes.white,
            editor: FdcEditorThemes.light,
          ),
    child: const CustomersPage(),
  ),
)

With this arrangement, Flutter owns the active locale and FDC resolves its translation and formatting configuration from that locale.