General Purpose
part 'theme.g.dart';
@ThemeGen(name: 'Light')
class _$AppThemeLight {}
@ThemeGen(name: 'Dark')
class _$AppThemeDark {}
@ThemeGenExtension(parent: _$AppThemeLight, name: 'AppColors')
class _$LightColors {
// fields must be static const
static const background = Color(0xFFEEEEEE);
static const primary = Color(0xFFFFFFFF);
}
@ThemeGenExtension(parent: _$AppThemeDark, name: 'AppColors')
class _$DarkColors {
// fields must be static const
static const background = Color(0xFFEEEEED);
static const primary = Color(0xFFFFFFFF);
}
@ThemeGenExtension(parent: _$AppThemeLight, name: 'FontStyles')
class _$LightFontStyles {
// fields must be static const
static const h1 = FontStyle(...);
static const h2 = FontStyle(...);
}
@ThemeGenExtension(parent: _$AppThemeDark, name: 'FontStyles')
class _$DarkFontStyles {
// fields must be static const
static const h1 = FontStyle(...);
static const h2 = FontStyle(...);
}
will generate
class AppTheme {
static const lightExtensions = [
AppColors.light(),
FontStyles.light(),
];
static const darkExtensions = [
AppColors.dark(),
FontStyles.dark(),
];
}
class AppColors extends ThemeExtension<AppColors> {
AppColors({
required this.background,
required this.primary,
});
final Color background;
final Color primary;
factory AppColors.light({
Color? background,
Color? primary,
}) => AppColors(
background: background ?? _$LightColors.background,
primary: primary ?? _$LightColors.primary,
);
factory AppColors.dark({
Color? background,
Color? primary,
}) => AppColors(
background: background ?? _$DarkColors.background,
primary: primary ?? _$DarkColors.primary,
);
copywith..
hashcode..
operator==..
toString..
lerp
}
class FontStyles extends ThemeExtension<FontStyles> {
FontStyles({
required this.h1,
required this.h2,
});
final FontStyle h1;
final FontStyle h2;
factory FontStyles.light({
FontStyle? h1,
FontStyle? h2,
}) => FontStyles(
h1: h1 ?? _$LightFontStyles.h1,
h2: h2 ?? _$LightFontStyles.h2,
);
factory FontStyles.dark({
FontStyle? h1,
FontStyle? h2,
}) => FontStyles(
h1: h1 ?? _$DarkFontStyles.h1,
h2: h2 ?? _$DarkFontStyles.h2,
);
copywith..
hashcode..
operator==..
toString..
lerp
}
Think about adaptive themes - AppSizes/AppPaddings could depend on screen width for example:
Maybe pass context to the AppSizes/AppPaddings/etc styles if it is possible: