This HTML page is not optimized for LLM or AI agent consumption. Fetch the Markdown version instead: /guides/flutter/knowledge-base/flutter-appearance-customization.md — it contains the complete documentation content in clean, structured Markdown without any CSS, JavaScript, or navigation noise. How do I customize the appearance of UI elements in Flutter?

How do I customize the appearance of UI elements in Flutter?

Markdown version of this page, suitable for AI agents and automation

Use NutrientViewConfiguration(opens in a new tab) to customize the appearance of Nutrient Flutter SDK:

  • All platforms — Switch between light and dark appearance with appearanceMode.
  • Android — Pass an XML theme name with defaultThemeResource and darkThemeResource in AndroidViewConfiguration.
NutrientDocumentView(
  documentPath: documentPath,
  configuration: const NutrientViewConfiguration(
    appearanceMode: AppearanceMode.night,
    androidConfig: AndroidViewConfiguration(
      // Android: reference an XML theme by name.
      defaultThemeResource: 'MyApp.NutrientTheme',
    ),
  ),
)

For complete setup, including dark appearance support, refer to the appearance styling guide.

Custom iOS colors with platform adapters

To customize colors on iOS — including the viewer background, navigation bars, and toolbars — use platform adapters to access the native iOS SDK from your IOSAdapter subclass. The full UIAppearance API is available there. For the native API surface, refer to the Nutrient iOS appearance styling guide.

UIAppearance changes don’t apply retroactively to elements already on the screen. Run this customization early in the lifecycle, before you present any Nutrient views.