iOS Frame customisation

Create theme

To create iOS theme, KevinThemeIos() object must be created. More info on iOS theme attributes can be found here.

kevin_theme_ios.dart
class KevinThemeIos {
  //  Modify content insets
  final KevinInsets? insets;

  // Modify general shared colour properties between screens
  final KevinGeneralStyle? generalStyle;

  //  Modify navigation bar style if you use our navigation controller
  final KevinNavigationBarStyle? navigationBarStyle;

  //  Modify bottom sheet (for example country selection container)
  final KevinSheetPresentationStyle? sheetPresentationStyle;

  //  Modify style of the separate sections (bank selection titles)
  final KevinSectionStyle? sectionStyle;

  //  Modify grid layout style (bank selection cells)
  final KevinGridTableStyle? gridTableStyle;

  //  Modify list layout style (country selection cells)
  final KevinListTableStyle? listTableStyle;

  //  Modify navigation link style (country selection button)
  final KevinNavigationLinkStyle? navigationLinkStyle;

  //  Modify main button (Continue button) style
  final KevinButtonStyle? mainButtonStyle;

  //  Modify negative button style
  final KevinButtonStyle? negativeButtonStyle;
  final KevinTextFieldStyle? textFieldStyle;
  final KevinEmptyStateStyle? emptyStateStyle;

  /* Constructor is omitted */
}

To use custom icons where applicable, image resource (or resource folder) should be declared in pubspec.yaml.

flutter:
  assets:
    - assets/images/
    - assets/icons/

Then, image resource bytes have to be retrieved and used in theme object.

  final customImage = await rootBundle.load('assets/images/icon.png');
  final navigationBarStyle = KevinNavigationBarStyle(
    backButtonImage: customImage.buffer.asUint8List(),
  );

  final iosTheme = KevinThemeIos(navigationBarStyle: navigationBarStyle);

Set theme

When theme object is created, theme must be set inside application's main() method.

main.dart
Future<void> main() async {
  final customImage = await rootBundle.load('assets/images/icon.png');
  final navigationBarStyle = KevinNavigationBarStyle(
    backButtonImage: customImage.buffer.asUint8List(),
  );

  final iosTheme = KevinThemeIos(navigationBarStyle: navigationBarStyle);

  await Kevin.setTheme(
    iosTheme: iosTheme,
  );
}

Last updated