Created
June 8, 2023 07:21
-
-
Save SashaKryzh/5b7eb45226dfb7ec521f7e1634c85dfc to your computer and use it in GitHub Desktop.
Flutter ThemeExtension for custom text styles.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/// `ThemeExtension` template for custom text styles. | |
/// | |
/// If your goal is to only change the text color for light/dark mode, I don't see a big benefit from this extension. | |
/// For the default text style in the Text widget, you can set `textTheme.bodyMedium` in `ThemeData` (example: lib/app_theme.dart). | |
/// And to set text color for specific widgets, you can use `style: TextStyle(color: Theme.of(context).appColors.error)` or | |
/// `style: AppTypography.h1.copyWith(color: context.theme.appColors.error)`. | |
class AppTextThemeExtension extends ThemeExtension<AppTextThemeExtension> { | |
const AppTextThemeExtension({ | |
required this.displayLarge, | |
required this.displayMedium, | |
required this.displaySmall, | |
required this.headlineLarge, | |
required this.headlineMedium, | |
required this.headlineSmall, | |
required this.titleLarge, | |
required this.titleMedium, | |
required this.titleSmall, | |
required this.bodyLarge, | |
required this.bodyMedium, | |
required this.bodySmall, | |
required this.labelLarge, | |
}); | |
final TextStyle displayLarge; | |
final TextStyle displayMedium; | |
final TextStyle displaySmall; | |
final TextStyle headlineLarge; | |
final TextStyle headlineMedium; | |
final TextStyle headlineSmall; | |
final TextStyle titleLarge; | |
final TextStyle titleMedium; | |
final TextStyle titleSmall; | |
final TextStyle bodyLarge; | |
final TextStyle bodyMedium; | |
final TextStyle bodySmall; | |
final TextStyle labelLarge; | |
@override | |
ThemeExtension<AppTextThemeExtension> copyWith({ | |
TextStyle? displayLarge, | |
TextStyle? displayMedium, | |
TextStyle? displaySmall, | |
TextStyle? headlineLarge, | |
TextStyle? headlineMedium, | |
TextStyle? headlineSmall, | |
TextStyle? titleLarge, | |
TextStyle? titleMedium, | |
TextStyle? titleSmall, | |
TextStyle? bodyLarge, | |
TextStyle? bodyMedium, | |
TextStyle? bodySmall, | |
TextStyle? labelLarge, | |
}) { | |
return AppTextThemeExtension( | |
displayLarge: displayLarge ?? this.displayLarge, | |
displayMedium: displayMedium ?? this.displayMedium, | |
displaySmall: displaySmall ?? this.displaySmall, | |
headlineLarge: headlineLarge ?? this.headlineLarge, | |
headlineMedium: headlineMedium ?? this.headlineMedium, | |
headlineSmall: headlineSmall ?? this.headlineSmall, | |
titleLarge: titleLarge ?? this.titleLarge, | |
titleMedium: titleMedium ?? this.titleMedium, | |
titleSmall: titleSmall ?? this.titleSmall, | |
bodyLarge: bodyLarge ?? this.bodyLarge, | |
bodyMedium: bodyMedium ?? this.bodyMedium, | |
bodySmall: bodySmall ?? this.bodySmall, | |
labelLarge: labelLarge ?? this.labelLarge, | |
); | |
} | |
@override | |
ThemeExtension<AppTextThemeExtension> lerp( | |
covariant ThemeExtension<AppTextThemeExtension>? other, | |
double t, | |
) { | |
if (other is! AppTextThemeExtension) { | |
return this; | |
} | |
return AppTextThemeExtension( | |
displayLarge: TextStyle.lerp(displayLarge, other.displayLarge, t)!, | |
displayMedium: TextStyle.lerp(displayMedium, other.displayMedium, t)!, | |
displaySmall: TextStyle.lerp(displaySmall, other.displaySmall, t)!, | |
headlineLarge: TextStyle.lerp(headlineLarge, other.headlineLarge, t)!, | |
headlineMedium: TextStyle.lerp(headlineMedium, other.headlineMedium, t)!, | |
headlineSmall: TextStyle.lerp(headlineSmall, other.headlineSmall, t)!, | |
titleLarge: TextStyle.lerp(titleLarge, other.titleLarge, t)!, | |
titleMedium: TextStyle.lerp(titleMedium, other.titleMedium, t)!, | |
titleSmall: TextStyle.lerp(titleSmall, other.titleSmall, t)!, | |
bodyLarge: TextStyle.lerp(bodyLarge, other.bodyLarge, t)!, | |
bodyMedium: TextStyle.lerp(bodyMedium, other.bodyMedium, t)!, | |
bodySmall: TextStyle.lerp(bodySmall, other.bodySmall, t)!, | |
labelLarge: TextStyle.lerp(labelLarge, other.labelLarge, t)!, | |
); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment