Onboarding

The SDK provides 2 optional onboarding possibilities that will be shown to the user on first start with some default content. It can be disabled, if you do not want to use it. You can also alter the contents of the onboarding to adopt it to your needs.

Full Screen View Pager

The first option provides a full screen view pager with swipable content that opens once before the camera starts.

By default, this option is deactivated on the document scan and activated on the photo payment process.

Scan Hint Popup

The second option is a popup on the scanning screen.

By default, this option is activated on document scan and on photo payment.

Customize

Button colors are configured by the global color configuration.

Onboarding

You can use the onboarding option as part of the document scan or photo payment process to alter the default onboarding behaviour to your needs. Currently the following values can be set:

Property	Type	Description
items	List<DocutainListItem>?	The items you want to show within the onboarding. If you don't provide any items, some default items will be displayed in case of photo payment. In case of document scan, onboarding won't be shown. See below code sample for more details.
buttonNext	DocutainButton?	The button that goes to the next item.
buttonFinish	DocutainButton?	The button that closes the onboarding on the last item.
buttonSkip	DocutainButton?	The button to skip (close) the onboarding.
buttonBack	DocutainButton?	The button that goes to the previous item. It is disabled by default.
scanHintPopup	ScanHintPopup?	A popup that appears when scan is opened for the first time, explaining the user how to scan. See ScanHintPopup for more details.

If you want to provide your own swipeable items instead of the default items, you can do that by providing your own list of DocutainListItem. Each item consists of an image, a title and a message.

image needs to be a name of an image resource in the drawable folder (Android), respectively the name of an image in your assets catalog (iOS).

Document Scan

var onboardingDefaultItems = await DocutainSdkUi.onboardingDefaultItems();

var scanConfig = DocumentScannerConfiguration();
scanConfig.onboarding?.items = <DocutainListItem>[
  onboardingDefaultItems[2],
  onboardingDefaultItems[4],
  DocutainListItem(image: 'my_icon', title: 'my onboarding page 3', message: 'my onboarding page 3\nline 2'),
];
var result = await DocutainSdkUi.scanDocument(scanConfig);

Photo Payment

var onboardingDefaultItems = await DocutainSdkUi.onboardingDefaultItems();

var paymentConfig = PhotoPaymentConfiguration();
paymentConfig.onboarding?.items = <DocutainListItem>[
  onboardingDefaultItems[2],
  onboardingDefaultItems[4],
  DocutainListItem(image: 'my_icon', title: 'my onboarding page 3', message: 'my onboarding page 3\nline 2')
];
var result = await DocutainSdkUi.startPhotoPayment(paymentConfig);

info

You can get the default items used by the SDK to use them for your own list.

var onboardingDefaultItems = await DocutainSdkUi.onboardingDefaultItems();

The following sample alters the buttonNext.

icon needs to be a name of an image resource in the drawable folder (Android), respectively the name of an image in your assets catalog (iOS).

Document Scan

var onboardingDefaultItems = await DocutainSdkUi.onboardingDefaultItems();

var scanConfig = DocumentScannerConfiguration();
scanConfig.onboarding?.items = onboardingDefaultItems;
scanConfig.onboarding?.buttonNext?.title = 'my next button';
scanConfig.onboarding?.buttonNext?.icon = 'my_icon';
var result = await DocutainSdkUi.scanDocument(scanConfig);

Photo Payment

var paymentConfig = PhotoPaymentConfiguration();
paymentConfig.onboarding!.buttonNext?.title = 'my next button';
paymentConfig.onboarding!.buttonNext?.icon = 'my_icon';
var result = await DocutainSdkUi.startPhotoPayment(paymentConfig);

ScanHintPopup

The following provides an overview of the currently available options to alter the scanHintPopup:

Property	Type	Description
title	String?	The text to display as title.
message	String?	The text to display as message.
closeButton	String?	The text of the close button.
imageSource	String?	The image to display. On Android, this needs to be a name of an image resource in the drawable folder. On iOS, it needs to be the name of an image in your assets catalog.

The following sample alters the imageSource.

imageSource needs to be a name of an image resource in the drawable folder (Android), respectively the name of an image in your assets catalog (iOS).

Document Scan

var scanConfig = DocumentScannerConfiguration();
scanConfig.onboarding?.scanHintPopup?.imageSource = 'my_scan_hint_popup_image';
var result = await DocutainSdkUi.scanDocument(scanConfig);

Photo Payment

var paymentConfig = PhotoPaymentConfiguration();
paymentConfig.onboarding?.scanHintPopup?.imageSource = 'my_scan_hint_popup_image';
var result = await DocutainSdkUi.startPhotoPayment(paymentConfig);

Disable

If you don't want to use either of them, just set the onboarding option to null.

Document Scan

var scanConfig = DocumentScannerConfiguration();
scanConfig.onboarding = null;
var result = await DocutainSdkUi.scanDocument(scanConfig);

Photo Payment

var paymentConfig = PhotoPaymentConfiguration();
paymentConfig.onboarding = null;
var result = await DocutainSdkUi.startPhotoPayment(paymentConfig);

If you want to use the swipable onboarding, but not the popup, set the scanHintPopup option to null.

Document Scan

var onboardingDefaultItems = await DocutainSdkUi.onboardingDefaultItems();

var scanConfig = DocumentScannerConfiguration();
scanConfig.onboarding?.items = onboardingDefaultItems;
scanConfig.onboarding?.scanHintPopup = null;
var result = await DocutainSdkUi.scanDocument(scanConfig);

Photo Payment

var paymentConfig = PhotoPaymentConfiguration();
paymentConfig.onboarding?.scanHintPopup = null;
var result = await DocutainSdkUi.startPhotoPayment(paymentConfig);

If you want to use the popup for Photo Payment, but not the swipable onboarding, set the items option to an empty array [].

For document scan, this is the default option.

var paymentConfig = PhotoPaymentConfiguration();
paymentConfig.onboarding?.items = [];
var result = await DocutainSdkUi.startPhotoPayment(paymentConfig);

Reset

Both onboarding options are shown only once. If you want to show them again, you can use the resetOnboarding method. You can chose which one you want to reset:

DocutainSdkUi.resetOnboarding(onboarding: true, scanHintPopup: true);