Guides

Customize PDF Content Area UI

This section explains how to customize the interactive UI styles within PDF pages using readerViewConfig.uiStyle. This configuration applies only to the PDF content area itself, including visual elements such as text selection, annotation and form selection borders, screenshot selection area, page rectangle highlighting, and icons within the page. It does not include toolbar, theme colors, or overall reader UI configuration.

Use this page when you want to change native visual helpers inside the page canvas. For toolbar buttons, menus, or mode visibility, use the dedicated toolbar and context menu pages instead.

Flutter uses Color values in code and serializes them as hex strings with alpha when passing the configuration to the native SDK.

Annotation and Content Editor Selection Style

This configuration controls the border and control point styles of annotations and content editor objects in the selected state.

CPDFConfiguration(
  readerViewConfig: CPDFReaderViewConfig(
    uiStyle: CPDFUiStyleConfig.create(
      focusBorderStyle: const CPDFUiBorderStyle(
        nodeColor: Colors.pink,
        borderColor: Colors.pink,
        borderWidth: 2,
        borderDashPattern: [0,0]
      ),
    )
  )
);

Field	Type	Description
nodeColor	String	Control point (corner) color
borderColor	String	Selection border color
borderWidth	Number	Border width
borderDashPattern	Number[]	Dash pattern [dash length, gap length]

Content Editor Default Border Style

This configuration controls the border display style of content editor objects in the unselected state.

CPDFConfiguration(
  readerViewConfig: CPDFReaderViewConfig(
    uiStyle: CPDFUiStyleConfig.create(
      defaultBorderStyle: const CPDFUiBorderStyle(
        borderColor: Colors.amberAccent,
        borderWidth: 2,
        borderDashPattern: [20, 8]
      )
    )
  )
);

Field	Type	Description
borderColor	String	Border color
borderWidth	Number	Border width
borderDashPattern	Number[]	Dash pattern

Image Crop Border Style

This configuration controls the border style shown while cropping an image in content editor mode.

CPDFConfiguration(
  readerViewConfig: CPDFReaderViewConfig(
    uiStyle: CPDFUiStyleConfig.create(
      cropImageStyle: const CPDFUiBorderStyle(
        borderColor: Colors.pink,
        borderWidth: 2,
        borderDashPattern: [20, 8]
      )
    )
  )
);

Field	Type	Description
borderColor	String	Crop border color
borderWidth	Number	Crop border width
borderDashPattern	Number[]	Dash pattern

Form Drawing and Preview Style

This configuration is used to set the drawing preview effect during form control creation.

CPDFConfiguration(
  readerViewConfig: CPDFReaderViewConfig(
    uiStyle: CPDFUiStyleConfig.create(
      formPreview: CPDFUiFormPreviewStyle(
        style: CPDFFormPreviewStyleType.fill,
        color: Colors.purple.withAlpha(100),
      ),
    )
  )
);

Field	Description
style	Preview style, supports fill / stroke
strokeWidth	Border width
color	Preview color (supports transparency)

Screenshot Selection Area Style

This configuration is used to customize the display effect of selection borders and mask areas in the screenshot function.

CPDFConfiguration(
  readerViewConfig: CPDFReaderViewConfig(
    uiStyle: CPDFUiStyleConfig.create(
      screenshot: const CPDFUiScreenshotStyle(
        outsideColor: Colors.transparent,
        borderColor: Colors.purple,
        borderWidth: 5,
        borderDashPattern: [10,5],
        fillColor: Colors.transparent
      )
    )
  )
);

Field	Description
outsideColor	Mask color outside selection
fillColor	Fill color inside selection
borderColor	Border color
borderWidth	Border width
borderDashPattern	Dash pattern

Text Selection Style and Operation Indicators

This configuration controls the background color of the text selection area and the operation indicator icons on both sides.

CPDFConfiguration(
  readerViewConfig: CPDFReaderViewConfig(
    uiStyle: CPDFUiStyleConfig.create(
      selectTextColor: Colors.deepOrange.withAlpha(100),
      icons: const CPDFUiStyleIcons(
        selectTextIcon: 'ic_test_cursor',
        selectTextLeftIcon: 'ic_test_cursor_left',
        selectTextRightIcon: 'ic_test_cursor_right',
        rotationAnnotationIcon: 'ic_test_rotate'
      )
    )
  )
);

Field	Description
selectTextColor	Text selection background color
selectTextLeftIcon	Left operation indicator icon
selectTextRightIcon	Right operation indicator icon
selectTextIcon	Default operation icon
rotationAnnotationIcon	Rotate annotation icon

Adding Custom Icon Resources:

• Android: Place the icon file (e.g., ic_test_cursor.png) in the android/app/src/main/res/drawable directory.
• iOS: Add the icon file (e.g., ic_test_cursor.png) to the ios/Runner/Assets.xcassets asset catalog.

Page Rectangle Highlight Style

This configuration is used for the rectangular area style when highlighting a specified page through the controller.setDisplayPageIndex() API.

CPDFConfiguration(
  readerViewConfig: CPDFReaderViewConfig(
    uiStyle: CPDFUiStyleConfig.create(
      displayPageRect: CPDFUiDisplayPageRectStyle(
        borderColor: Colors.green,
        borderWidth: 4,
        borderDashPattern: [15,5],
        fillColor: Colors.green.withAlpha(50)
      ),
    )
  )
);

Field	Description
fillColor	Rectangle area fill color
borderColor	Rectangle border color
borderWidth	Border width
borderDashPattern	Dash pattern

Bookmark Marker Icon

This configuration is used to customize the display icon for bookmark markers within pages.

CPDFConfiguration(
  readerViewConfig: CPDFReaderViewConfig(
    uiStyle: CPDFUiStyleConfig.create(
      bookmarkIcon: 'ic_test_bookmark',
    )
  )
);

When this field is not configured, the SDK will use the default bookmark icon.

Complete Example

See the Flutter example screen example/lib/examples/ui_customization/ui_style_customization_example.dart for a complete configuration that combines bookmarkIcon, icons, selectTextColor, defaultBorderStyle, focusBorderStyle, and cropImageStyle.