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.

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

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.