# 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](./android-sdk). To change resources on iOS, see the [iOS customization guide](./ios-sdk). ## 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 theme configuration: ```dart 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: theme); ``` ### ID v2 UX customization Both platforms support customization of the ID v2 experience via `IncodeOnboardingSdk.setTheme(theme: theme)`. - Android: see the [ID V2 customization guide](./android-sdk). - iOS: see the [ID V2 customization guide](./ios-sdk). ## 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', }; 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](./ios-sdk). For Android string keys, see the [Dynamic Localization Guide](./android-sdk).