How do I customize the appearance of Nutrient in Flutter?

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.
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 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:

- (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.