How Do I Customize the Appearance of PSPDFKit in Flutter?

Q: How Do I Customize the Appearance of PSPDFKit When Using the Flutter Library?

A: To customize the appearance of user interface elements when using the PSPDFKit Flutter Library for iOS, we recommend doing it directly in the Objective-C plugin, as this is simply a lot easier than exposing each and every single element to Dart.

As an example, consider we want to change the appearance of the navigation bar and the toolbars. We 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 info: 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 mode and dark mode.
  UIColor *backgroundColor = [UIColor colorWithRed:0.77 green:0.88 blue:0.65 alpha:1.0];
  UIColor *foregroundColor = [UIColor colorWithWhite:0.0 alpha:1];

  // More info: 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 we have this helper methods, we can call it right after we call [PSPDFKitGlobal setLicenseKey:licenseKey]; and this will update the appearance of all navigation bar and toolbars in our iOS Flutter app.

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

Please note that this method does not retroactively apply on elements already on the screen, so it needs to be called very early in the life-cycle, before any PSPDFKit views are presented on screen for the appearance customization to take effect.