How Do I Customize the Appearance of PSPDFKit in Flutter?

To customize the appearance of user interface (UI) elements when using the PSPDFKit Flutter library for iOS, we recommend doing it directly in the Objective-C plugin, as this is easier than exposing each and every single element to Dart.

As an example, consider you want to change the appearance of the navigation bar and the toolbars. You can add the following helper methods in the PspdfkitPlugin.m file:

- (void)customizeAppearanceOfNavigationBar {
  // Detailed guide on appearance customization:
  // https://pspdfkit.com/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;
}

Once you have this helper method, you can call it after calling [PSPDFKitGlobal setLicenseKey:licenseKey];, and this will update the appearance of all navigation bars and toolbars in your iOS Flutter app.

Optionally, you can also add a new handler for this method in - (void)handleMethodCall:(FlutterMethodCall*)call result:(FlutterResult)result. If you do this, you’ll also need to add a method in main.dart that invokes the customizeAppearance method in the plugin.

Note that this method doesn’t retroactively apply to elements already on the screen, so it needs to be called very early in the lifecycle, before any PSPDFKit views are presented onscreen, for the customization to take effect.