--- title: "Customization" url: "https://developer.incode.com/sdk-reference/flutter-customization/" section: "sdk-reference" group: "Flutter SDK" version: "v1.1" status: "live" --- # Customization The Flutter SDK supports customization of theme, text, images, and videos. The available options and the methods used to apply them differ between Android and iOS. To change theme and resources (text, images, and videos) on Android, see the [Android customization guide](/sdk-reference/android-customization/). To change resources on iOS, see the [iOS customization guide](/sdk-reference/ios-customization/). ## setTheme Applies a custom theme to the SDK UI on both iOS and Android. `setTheme` accepts both the v1 and v2 theme schemas. Pass a JSON string. Encode a map with `jsonEncode` or pass file contents directly: ```dart import 'dart:convert'; Map theme = { "colors": { "accent": "#00B2FD", "primary": "#20263D", "background": "#FFFFFF", "secondaryBackground": "#E9E9EB", "success": "#0CD5A2", "error": "#FF5C6F", "warning": "#F3AB3C", "cancel": "#20263D" }, "fonts": { "buttonBig": { "name": "CircularXXTT-Black", "size": "20" }, "buttonMedium": { "name": "CircularXXTT-Black", "size": "16" }, "buttonSmall": { "name": "CircularXXTT-Black", "size": "12" }, "title": { "name": "CircularXXTT-Black", "size": "25" }, "hugeTitle": { "name": "CircularXXTT-Black", "size": "40" }, "subtitle": { "name": "CircularXXTT-Black", "size": "18" }, "boldedSubtitle": { "name": "CircularXXTT-Bold", "size": "18" }, "smallSubtitle": { "name": "CircularXXTT-Black", "size": "14" }, "info": { "name": "CircularXXTT-Black", "size": "16" }, "body": { "name": "CircularXXTT-Medium", "size": "14" }, "boldedBody": { "name": "CircularXXTT-Bold", "size": "14" }, "textFieldBig": { "name": "CircularXXTT-Black", "size": "20" }, "textFieldMedium": { "name": "CircularXXTT-Black", "size": "15" } }, "buttons": { "primary": { "states": { "normal": { "animateStateChange": true, "alpha": 1, "backgroundColor": "#00B2FD", "borderColor": "", "borderWidth": 0, "cornerRadius": 32, "shadowColor": "#000000", "shadowOffset": [0,5], "shadowOpacity": 0.15, "shadowRadius": 9, "textColor": "#FFFFFF", "transform": { "a": 1, "b": 0, "c": 0, "d": 1, "tx": 0, "ty": 0 } }, "highlighted": { "animateStateChange": true, "alpha": 1, "backgroundColor": "#20263D", "borderColor": "", "borderWidth": 0, "cornerRadius": 32, "shadowColor": "#000000", "shadowOffset": [0,5], "shadowOpacity": 0.15, "shadowRadius": 9, "textColor": "#00B2FD", "transform": { "a": 1, "b": 0, "c": 0, "d": 1, "tx": 0, "ty": 0 } }, "disabled": { "animateStateChange": true, "alpha": 1, "backgroundColor": "#E9E9EB", "borderColor": "", "borderWidth": 0, "cornerRadius": 32, "shadowColor": "#000000", "shadowOffset": [0,5], "shadowOpacity": 0, "shadowRadius": 9, "textColor": "#FFFFFF", "transform": { "a": 1, "b": 0, "c": 0, "d": 1, "tx": 0, "ty": 0 } } }, "big": { "height": 64, "minWidth": 200, "contentInsets": { "top": 19, "left": 32, "bottom": 19, "right": 32 }, "kerning": 0 }, "medium": { "height": 46, "minWidth": 0, "contentInsets": { "top": 12, "left": 24, "bottom": 12, "right": 24 }, "kerning": 0 } }, "secondary": { "states": { "normal": { "animateStateChange": true, "alpha": 1, "backgroundColor": "#FFFFFF", "borderColor": "#20263D", "borderWidth": 1, "cornerRadius": 32, "shadowColor": "", "shadowOffset": [0,0], "shadowOpacity": 0, "shadowRadius": 0, "textColor": "#20263D", "transform": { "a": 1, "b": 0, "c": 0, "d": 1, "tx": 0, "ty": 0 } }, "highlighted": { "animateStateChange": true, "alpha": 1, "backgroundColor": "#20263D", "borderColor": "#20263D", "borderWidth": 1, "cornerRadius": 32, "shadowColor": "", "shadowOffset": [0,0], "shadowOpacity": 0, "shadowRadius": 0, "textColor": "#00B2FD", "transform": { "a": 1, "b": 0, "c": 0, "d": 1, "tx": 0, "ty": 0 } }, "disabled": { "animateStateChange": true, "alpha": 1, "backgroundColor": "#FFFFFF", "borderColor": "#E9E9EB", "borderWidth": 1, "cornerRadius": 32, "shadowColor": "", "shadowOffset": [0,0], "shadowOpacity": 0, "shadowRadius": 0, "textColor": "#E9E9EB", "transform": { "a": 1, "b": 0, "c": 0, "d": 1, "tx": 0, "ty": 0 } } }, "big": { "height": 64, "minWidth": 200, "contentInsets": { "top": 19, "left": 32, "bottom": 19, "right": 32 }, "kerning": 0 }, "medium": { "height": 46, "minWidth": 0, "contentInsets": { "top": 12, "left": 24, "bottom": 12, "right": 24 }, "kerning": 0 } }, "text": { "states": { "normal": { "animateStateChange": true, "alpha": 1, "backgroundColor": "", "borderColor": "", "borderWidth": 0, "cornerRadius": 0, "shadowColor": "", "shadowOffset": [0,0], "shadowOpacity": 0, "shadowRadius": 0, "textColor": "#20263D", "transform": { "a": 1, "b": 0, "c": 0, "d": 1, "tx": 0, "ty": 0 } }, "highlighted": { "animateStateChange": true, "alpha": 1, "backgroundColor": "", "borderColor": "", "borderWidth": 0, "cornerRadius": 0, "shadowColor": "", "shadowOffset": [0,0], "shadowOpacity": 0, "shadowRadius": 0, "textColor": "#00B2FD", "transform": { "a": 1, "b": 0, "c": 0, "d": 1, "tx": 0, "ty": 0 } }, "disabled": { "animateStateChange": true, "alpha": 1, "backgroundColor": "", "borderColor": "", "borderWidth": 0, "cornerRadius": 0, "shadowColor": "", "shadowOffset": [0,0], "shadowOpacity": 0, "shadowRadius": 0, "textColor": "#E9E9EB", "transform": { "a": 1, "b": 0, "c": 0, "d": 1, "tx": 0, "ty": 0 } } }, "big": { "height": 40, "minWidth": 200, "contentInsets": { "top": 8, "left": 16, "bottom": 8, "right": 16 }, "kerning": 0 }, "medium": { "height": 30, "minWidth": 0, "contentInsets": { "top": 12, "left": 24, "bottom": 12, "right": 24 }, "kerning": 0 } }, "help": { "states": { "normal": { "animateStateChange": true, "alpha": 1, "backgroundColor": "#00B2FD", "borderColor": "", "borderWidth": 0, "cornerRadius": 32, "shadowColor": "#000000", "shadowOffset": [0,5], "shadowOpacity": 0.15, "shadowRadius": 9, "textColor": "#FFFFFF", "transform": { "a": 1, "b": 0, "c": 0, "d": 1, "tx": 0, "ty": 0 } }, "highlighted": { "animateStateChange": true, "alpha": 1, "backgroundColor": "#20263D", "borderColor": "", "borderWidth": 0, "cornerRadius": 32, "shadowColor": "#000000", "shadowOffset": [0,5], "shadowOpacity": 0.15, "shadowRadius": 9, "textColor": "#00B2FD", "transform": { "a": 1, "b": 0, "c": 0, "d": 1, "tx": 0, "ty": 0 } }, "disabled": { "animateStateChange": true, "alpha": 1, "backgroundColor": "#E9E9EB", "borderColor": "", "borderWidth": 0, "cornerRadius": 32, "shadowColor": "#000000", "shadowOffset": [0,5], "shadowOpacity": 0, "shadowRadius": 9, "textColor": "#FFFFFF", "transform": { "a": 1, "b": 0, "c": 0, "d": 1, "tx": 0, "ty": 0 } } }, "big": { "height": 64, "minWidth": 200, "contentInsets": { "top": 19, "left": 32, "bottom": 19, "right": 32 }, "kerning": 0 }, "medium": { "height": 46, "minWidth": 0, "contentInsets": { "top": 12, "left": 24, "bottom": 12, "right": 24 }, "kerning": 0 } } }, "labels": { "title": { "textColor": "#20263D", "kerning": 0 }, "secondaryTitle": { "textColor": "#FFFFFF", "kerning": 0 }, "subtitle": { "textColor": "#20263D", "kerning": 0 }, "secondarySubtitle": { "textColor": "#FFFFFF", "kerning": 0 }, "smallSubtitle": { "textColor": "#20263D", "kerning": 0 }, "info": { "textColor": "#636670", "kerning": 0 }, "secondaryInfo": { "textColor": "#FFFFFF", "kerning": 0 }, "body": { "textColor": "#20263D", "kerning": 0 }, "secondaryBody": { "textColor": "#FFFFFF", "kerning": 0 }, "code": { "textColor": "#20263D", "kerning": 16 } }, "customComponents": { "cameraFeedback": { "alpha": 0.8, "backgroundColor": "#000000", "cornerRadius": 20, "textBackgroundColor": "", "textColor": "#FFFFFF" }, "idCaptureHelp": { "commonIssueLayoutOrientation": "horizontal" }, "idSideLabel": { "alpha": 1, "backgroundColor": "#FFFFFF", "borderColor": "", "borderWidth": 0, "cornerRadius": 5 }, "separator": { "alpha": 1.0, "color": "#20263D", "cornerRadius": 0, "padding": 24, "thickness": 1 }, "signature": { "signatureColor": "#04BD19", "canvasBorderColor": "#EC03FC" }, "idAutocaptureCountdown": { "backgroundColor": "#00B2FD", "numberColor": "#FFFFFF" } }, }; IncodeOnboardingSdk.setTheme(theme: jsonEncode(theme)); ``` ### ID v2 UX customization Both platforms support customization of the ID v2 experience via `IncodeOnboardingSdk.setTheme(theme: jsonEncode(theme))`. - Android: see the [ID V2 customization guide](/sdk-reference/android-customization/#configure-v2-theme-and-ux). - iOS: see the [ID V2 customization guide](/sdk-reference/ios-customization/#configure-v2-theme-and-ux). ## setLocalizationLanguage To set the localization language at runtime, call `IncodeOnboardingSdk.setLocalizationLanguage`. **Parameters:** - `language`: String. Language code used for runtime localization. Supported values are currently `en`, `es`, `pt`, and `he`. ```dart IncodeOnboardingSdk.setLocalizationLanguage('es'); ``` On Android, add the following dependency to your `app/build.gradle`: ```gradle implementation 'com.incode.sdk:extensions:1.2.1' ``` ## setString To programmatically set and update strings at runtime, call `IncodeOnboardingSdk.setString`. **Parameters:** - `strings`: Map\. Map of string keys and their values. ```dart Map strings = { // iOS labels 'incdOnboarding.idChooser.title': 'My Custom chooser title', // Android labels 'onboard_sdk_id_type_chooser_title': 'My Custom chooser title', }; await IncodeOnboardingSdk.setString(strings: strings); ``` On Android, add the following dependency to your `app/build.gradle`: ```gradle implementation 'com.incode.sdk:extensions:1.2.1' ``` For iOS string keys, see the [Localization Guide](/sdk-reference/ios-customization/#localize-display-text). For Android string keys, see the [Dynamic Localization Guide](/sdk-reference/android-customization/#dynamic-localization). ## setQuantityStrings To programmatically set and update pluralized (quantity) strings in runtime, call `IncodeOnboardingSdk.setQuantityStrings`. This method is supported on Android only. **Parameters:** - `locale`: String. A BCP 47 language tag such as `"en"`, `"es"`, or `"en-US"`. - `quantityStrings`: Map\>. A nested map, keyed first by plural name and then by quantity keyword: `plural name -> quantity keyword -> value`. Keywords are `'zero'`, `'one'`, `'two'`, `'few'`, `'many'` and `'other'`. They are not case-sensitive. ```dart Map> quantityStrings = { 'onboard_sdk_validation_attempts_remaining': { 'one': '%d attempt remaining', 'other': '%d attempts remaining', }, }; await IncodeOnboardingSdk.setQuantityStrings(locale: 'en', quantityStrings: quantityStrings); ``` On Android, add the following dependency to your `app/build.gradle`: ```gradle implementation 'com.incode.sdk:extensions:1.2.1' ``` For Android string keys, see the [Dynamic Localization Guide](/sdk-reference/android-customization/#dynamic-localization).