UI Components
In addition to the high level orchestrated screens described in Products, we also make available the smaller building-block UI components that are used to build those screens.
Details about available components can be found by visiting the reference docs/javadocs at https://javadoc.io/doc/com.smileidentity/android-sdk/latest/allclasses.html
For example, if you want to display only the Selfie Instruction screen:
SmartSelfieInstructionsScreen(
onInstructionsAcknowledged = { /* perform some action */ }
)Details about available components can be found by visiting the reference docs at https://smileidentity.github.io/ios/documentation/smileid. The UI components are listed under the Structures header
For example, if you want to display only the Selfie Instruction screen:
SmartSelfieInstructionsScreen()Customizing the Flutter SDK requires leveraging native SDK capabilities. This page details how to do so for each platform
To override strings, create a string resource file in your Android module. It should look something like android/app/src/main/res/values/strings.xml, however the exact path could vary depending on your project's structure.
Similarly, to change colors on Android, create a colors resource file, whose path should look something like (but maybe not exactly): android/app/src/main/res/values/colors.xml
Then, follow the instructions located at the Android docs under the XML resources tab. XML Resources
To leverage native iOS capabilities, you can define your color scheme as a Swift file in your ios module, at ios/Runner/CustomSmileTheme.swift (the exact path may vary depending on your project setup). It is recommended to use Xcode to make these changes.
Once the theme has been defined, you must set it in your AppDelegate by calling SmileID.apply(). This will most likely be located at ios/Runner/AppDelegate.swift (the exact path may vary depending on your project setup).
The full details on how to define the Swift Colors file is available here: Theming
Similarly, for localization, create a Localizable.strings file in the Xcode project, define an instance of SmileIDLocalizableStrings , and set it using SmileID.appy(). The full details on how to define the Localizations is available here: Localization and Copy
Selfie Capture
We also make available the smaller building-block UI components for selfie capture which goes through the flow and you can configure which screens or step to show which include the below
Selfie capture instruction screen which can be shown or hidden
Selfie capture screen
Selfie confirmation which can be shown or hidden
SmileIDSmartSelfieCaptureView(
showConfirmationDialog: true, //if true will show confirmation dialog after a successful selfie capture
showInstructions: true, //if true will show instruction screen before selfie capture
showAttribution: true, //if true will show SmileID attribution on the instruction screen
allowAgentMode: true,//if true will show the switch for agent mode
onSuccess: (String? result) {
// Your success handling logic
Map<String, dynamic> jsonResult = json.decode(result ?? '{}');
String formattedResult = jsonEncode(jsonResult);
},
onError: (String errorMessage) {
// Your error handling logic
},
) <SmileIDSmartSelfieCaptureView
allowAgentMode: true, //if true will show the switch for agent mode
showInstructions: true, //if true will show instruction screen before selfie capture
showAttribution: true, //if true will show SmileID attribution on the instruction screen
showConfirmation: true,//if true will show confirmation dialog after a successful selfie capture
onResult={(event) => {
if (event.nativeEvent.error) {
//handle error
return;
}
//handle success
}}
/>Document Capture
We also make available the smaller building-block UI components for document capture which goes through the flow and you can configure which screens or step to show which include the below
Document capture instruction screen which can be shown or hidden
Document capture screen
Document confirmation which can be shown or hidden
SmileIDDocumentCaptureView(
isDocumentFrontSide: true, //if true will show the instruction and prompts for front of document capture
showInstructions: true, //if true will show instruction screen before document capture
showAttribution: true, //if true will show SmileID attribution on the instruction screen
showConfirmationDialog: true,//if true will show confirmation dialog after a successful document capture
allowGalleryUpload: false,//if true will show the option to upload from gallery in addition to the take photo option
onSuccess: (String? result) {
// Your success handling logic
Map<String, dynamic> jsonResult = json.decode(result ?? '{}');
String formattedResult = jsonEncode(jsonResult);
},
onError: (String errorMessage) {
// Your error handling logic
},
) <SmileIDDocumentCaptureView
isDocumentFrontSide: true, //if true will show the instruction and prompts for front of document capture
showInstructions: true, //if true will show instruction screen before document capture
showAttribution: true, //if true will show SmileID attribution on the instruction screen
showConfirmation: true,//if true will show confirmation dialog after a successful document capture
allowGalleryUpload: false,//if true will show the option to upload from gallery in addition to the take photo option
onResult={(event) => {
if (event.nativeEvent.error) {
//handle error
return;
}
//handle success
}}
/>Last updated
Was this helpful?