Whitelabel PnP Flutter SDK
For defining custom UI, branding, and translations for your brand app, you just need to define an optional object called WhiteLabelData
.
WhiteLabelData
can be definied during initialization of the SDK in LoginParams
object.
This is a paid feature and the minimum pricing plan to use this SDK in a production environment is the Growth Plan. You can use this feature in the development environment for free.
Arguments
WhiteLabelData
- Table
- Class
Parameter | Description |
---|---|
appName? | Display name for the app in the UI. |
logoLight? | App logo to be used in dark mode. It accepts url in String as a value. |
logoDark? | App logo to be used in light mode. It accepts url in String as a value. |
defaultLanguage? | Language which will be used by Web3Auth, app will use browser language if not specified. Default language is Language.en . Checkout Language for supported languages. |
mode? | Theme mode for the login modal. Choose between ThemeModes.auto , ThemeModes.light or ThemeModes.dark background modes. Default value is ThemeModes.auto . |
theme? | Used to customize the theme of the login modal. It accepts HashMap as a value. |
appUrl? | Url to be used in the Modal. It accepts url in String as a value. |
useLogoLoader? | Use logo loader. If logoDark and logoLight are null, the default Web3Auth logo will be used for the loader. Default value is false. |
class WhiteLabelData {
final String? appName;
final String? logoLight;
final String? logoDark;
final Language? defaultLanguage;
final ThemeModes? mode;
final HashMap? theme;
final String? appUrl;
final bool? useLogoLoader;
WhiteLabelData({
this.appName,
this.logoLight,
this.logoDark,
this.defaultLanguage = Language.en,
this.mode = ThemeModes.auto,
this.theme,
this.appUrl,
this.useLogoLoader,
});
Map<String, dynamic> toJson() {
return {
'appName': appName,
'logoLight': logoLight,
'logoDark': logoDark,
'defaultLanguage': defaultLanguage.toString().split('.').last,
'mode': mode.toString().split('.').last,
'theme': theme,
'appUrl': appUrl,
'useLogoLoader': useLogoLoader
};
}
}
name
The name of the application. This will be displayed in the key reconstruction page.
Standard screen without any change
Name changed to Formidable Duo
logoLight
& logoDark
The logo of the application. Displayed in dark and light mode respectively. This will be displayed in the key reconstruction page.
logoLight
on dark mode
logoDark
on light mode
defaultLanguage
Default language will set the language used on all OpenLogin screens. The supported languages are:
en
- English (default)de
- Germanja
- Japaneseko
- Koreanzh
- Mandarines
- Spanishfr
- Frenchpt
- Portuguesenl
- Dutch
dark
Can be set to true
or false
with default set to false
.
For Light: dark: false
For Dark: dark: true
theme
Theme is a record of colors that can be configured. As of, now only primary
color can be set and has effect on OpenLogin screens (default primary
color is #0364FF
). Theme affects icons and links. Examples below.
Standard color #0364FF
Color changed to #D72F7A
Example
Future<void> initWeb3Auth() async {
final themeMap = HashMap<String, String>();
themeMap['primary'] = "#229954";
Uri redirectUrl;
if (Platform.isAndroid) {
redirectUrl = Uri.parse('{SCHEME}://{HOST}/auth');
// w3a://com.example.w3aflutter/auth
} else if (Platform.isIOS) {
redirectUrl = Uri.parse('{bundleId}://auth');
// com.example.w3aflutter://openlogin
} else {
throw UnKnownException('Unknown platform');
}
await Web3AuthFlutter.init(
Web3AuthOptions(
clientId: "WEB3AUTH_CLIENT_ID",
network: Network.sapphire_mainnet,
redirectUrl: redirectUrl,
whiteLabel: WhiteLabelData(
appName: "Web3Auth Flutter App",
logoLight:
"https://www.vectorlogo.zone/logos/flutterio/flutterio-icon.svg",
logoDark:
"https://cdn.icon-icons.com/icons2/2389/PNG/512/flutter_logo_icon_145273.png",
defaultLanguage: Language.en,
mode: ThemeModes.auto,
appUrl: "https://web3auth.io",
useLogoLoader: true,
theme: themeMap,
),
),
);
}