Skip to content

Architecture

Theming

We access our theme through these extensions. It shortens the syntax a little and is just generally nicer to use.

extension AppThemeColorExtension on BuildContext {
  //* General theme
  Color get primary => colorScheme.primary;
  Color get shadow => colorScheme.secondary;
  Color get light => colorScheme.surface;
  ...
  //* Const colors
  Color get error => colorScheme.error;
  Color get success => colorScheme.tertiary;
  Color get warning => colorScheme.onTertiary;
}

extension TextStyleExtension on BuildContext {
  TextStyle get normal => AppStyles.normal.copyWith(
        color: this.onLight,
      );
  TextStyle get subtitle => AppStyles.normal.copyWith(
        color: this.grey,
        fontSize: 15,
      );
  ...
}

Colors

Since we use a MaterialApp as App Widget, our underlying theme will be a MaterialTheme. Our designers will supply the colors used in _AppColors, these will be used throughout the themes.

class AppTheme {
  static ThemeData baseTheme = ThemeData(
    useMaterial3: true,
    fontFamily: PlatformUtils.isIos ? 'CupertinoSystemDisplay' : 'RobotoFlex',
    splashFactory: PlatformUtils.isIos ? NoSplash.splashFactory : null,
  );

  //* Dark theme
  static ThemeData darkTheme(ThemeType themeType) => baseTheme.copyWith(
        brightness: Brightness.dark,
        colorScheme: darkColorScheme(themeType),
      );

  static ColorScheme darkColorScheme() => ColorScheme.dark(
        //* Primary
        primary: _AppColors.primaryDark,
        ...
      );

  //* Light theme
  static ThemeData lightTheme() => baseTheme.copyWith(
        brightness: Brightness.light,
        colorScheme: lightColorScheme(themeType),
      );

  static ColorScheme lightColorScheme() {
    return ColorScheme.light(
      //* Primary
      primary: _AppColors.primary,
      ...
    );
  }
}

class _AppColors {
  //! Light
  //* General
  static const primary = Colors.amber;

  //! Dark
  //* General
  static const primaryDark = Colors.white;
}