---
title: "How do I customize the appearance of Nutrient in Flutter?"
canonical_url: "https://www.nutrient.io/guides/flutter/knowledge-base/flutter-appearance-customization/"
md_url: "https://www.nutrient.io/guides/flutter/knowledge-base/flutter-appearance-customization.md"
last_updated: "2026-05-15T15:53:41.577Z"
description: "Customize the appearance of UI elements in Nutrient Flutter SDK using built-in theming APIs or native iOS UIAppearance customization."
---

Nutrient Flutter SDK includes built-in theming APIs that work directly from Dart without native code:

- **Android** — Pass an XML theme name via `androidDefaultThemeResource` and `androidDarkThemeResource` in `PdfConfiguration`.

- **iOS** — Set colors for the viewer background, toolbars, and annotation toolbar via `ThemeConfiguration` in `PdfConfiguration`.

```dart

PdfConfiguration(
  // Android: reference an XML theme by name.
  androidDefaultThemeResource: 'MyApp.NutrientTheme',
  // iOS: set colors programmatically.
  themeConfiguration: const ThemeConfiguration(
    backgroundColor: Color(0xFF1E1E2E),
    toolbar: ToolbarTheme(
      backgroundColor: Color(0xFF181825),
      iconColor: Color(0xFFCDD6F4),
    ),
  ),
)

```

For the full walkthrough, including dark appearance support and cross-platform examples, see the [appearance styling](https://www.nutrient.io/guides/flutter/user-interface/appearance-styling.md) guide.

## Alternative: Native iOS customization

For finer control over iOS user interface (UI) elements beyond what `ThemeConfiguration` offers, customize the appearance directly in the native Objective-C plugin. This approach provides access to the full `UIAppearance` API.

Add the following helper methods in the `PspdfkitPlugin.m` file:

```objc

- (void)customizeAppearanceOfNavigationBar {
  // Detailed guide on appearance customization:
  // https://www.nutrient.io/guides/ios/customizing-the-interface/appearance-styling/

  UIColor *backgroundColor = [UIColor colorWithRed:1.00 green:0.72 blue:0.30 alpha:1.0];
  UIColor *foregroundColor = [UIColor colorWithWhite:0.0 alpha:1];

  // More information: https://developer.apple.com/documentation/uikit/uinavigationbar#1654334

  UINavigationBarAppearance *appearance = [[UINavigationBarAppearance alloc] init];
  appearance.titleTextAttributes = @{ NSForegroundColorAttributeName: foregroundColor };
  appearance.largeTitleTextAttributes = @{ NSForegroundColorAttributeName: foregroundColor };
  appearance.backgroundColor = backgroundColor;

  UINavigationBar *appearanceProxy = [UINavigationBar appearanceWhenContainedInInstancesOfClasses:@[PSPDFNavigationController.class]];
  appearanceProxy.standardAppearance = appearance;
  appearanceProxy.compactAppearance = appearance;
  appearanceProxy.scrollEdgeAppearance = appearance;
  appearanceProxy.tintColor = foregroundColor;

  // Repeat the same customization steps for
  // `[UINavigationBar appearanceWhenContainedInInstancesOfClasses:@[PSPDFNavigationController.class, UIPopoverPresentationController.class]];`
  // if you want to customize the look of navigation bars in popovers on iPad as well.
}

- (void)customizeAppearanceOfToolbar {
  // Use dynamic colors for light and dark appearance.
  UIColor *backgroundColor = [UIColor colorWithRed:0.77 green:0.88 blue:0.65 alpha:1.0];
  UIColor *foregroundColor = [UIColor colorWithWhite:0.0 alpha:1];

  // More information: https://developer.apple.com/documentation/uikit/uitoolbar#1652878

  UIToolbarAppearance *appearance = [[UIToolbarAppearance alloc] init];
  appearance.backgroundColor = backgroundColor;

  PSPDFFlexibleToolbar *appearanceProxy = [PSPDFFlexibleToolbar appearance];
  appearanceProxy.standardAppearance = appearance;
  appearanceProxy.compactAppearance = appearance;
  appearanceProxy.tintColor = foregroundColor;
}

```

Call these methods after `[PSPDFKitGlobal setLicenseKey:licenseKey];` to update the appearance of all navigation bars and toolbars in your iOS Flutter app.

Optional: Add a new handler in `- (void)handleMethodCall:(FlutterMethodCall*)call result:(FlutterResult)result` and a corresponding method in `main.dart` that invokes `customizeAppearance` from the plugin.

`UIAppearance` changes don’t retroactively apply to elements already on the screen. Call these methods early in the lifecycle, before presenting any Nutrient views.
---

## Related pages

- [Flutter Sending Data To Dart](/guides/flutter/knowledge-base/flutter-sending-data-to-dart.md)