How Do I Customize the Appearance of PSPDFKit in Flutter?

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

A: To customize the appearance of user interface elements when using the PSPDFKit Flutter wrapper 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:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
- (void)customizeAppearanceOfNavigationBar {
  // Detailed guide on appearance customization:
  // https://pspdfkit.com/guides/ios/current/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];

  // Always use the new appearance customization API on iOS 13 or higher.
  // More info: https://developer.apple.com/documentation/uikit/uinavigationbar#1654334
  if (@available(iOS 13, *)) {
    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;
  } else {
    UINavigationBar *appearanceProxy = [UINavigationBar appearanceWhenContainedInInstancesOfClasses:@[PSPDFNavigationController.class]];
    appearanceProxy.titleTextAttributes = @{ NSForegroundColorAttributeName: foregroundColor };
    if (@available(iOS 12.0, *)) {appearanceProxy.largeTitleTextAttributes = @{ NSForegroundColorAttributeName: foregroundColor };}
    appearanceProxy.barTintColor = backgroundColor;
    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 in iOS 13. Default to light mode on iOS 12 and lower.
  UIColor *backgroundColor = [UIColor colorWithRed:0.77 green:0.88 blue:0.65 alpha:1.0];
  UIColor *foregroundColor = [UIColor colorWithWhite:0.0 alpha:1];

  // Always use the new appearance customization API on iOS 13 or higher.
  // More info: https://developer.apple.com/documentation/uikit/uitoolbar#1652878
  if (@available(iOS 13, *)) {
    UIToolbarAppearance *appearance = [[UIToolbarAppearance alloc] init];
    appearance.backgroundColor = backgroundColor;

    PSPDFFlexibleToolbar *appearanceProxy = [PSPDFFlexibleToolbar appearance];
    appearanceProxy.standardAppearance = appearance;
    appearanceProxy.compactAppearance = appearance;
    appearanceProxy.tintColor = foregroundColor;
  } else {
    PSPDFFlexibleToolbar *appearanceProxy = [PSPDFFlexibleToolbar appearance];
    appearanceProxy.barTintColor = backgroundColor;
    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.