Skip to content

Instantly share code, notes, and snippets.

@UsamaKarim
Created April 8, 2023 21:39
Show Gist options
  • Save UsamaKarim/21fd32cd26b92b2a6e8ab5d2bb4e3473 to your computer and use it in GitHub Desktop.
Save UsamaKarim/21fd32cd26b92b2a6e8ab5d2bb4e3473 to your computer and use it in GitHub Desktop.
Extension on Flutter `BuildContext` to make it easier to access `TextTheme`, FontSizes and FontWeight for TextStyles based on Material 3 Design System
/// Extension on [BuildContext] to make it easier to access [TextTheme]
/// FontSizes and FontWeight for TextStyles based on Material 3 Design System
/// https://m3.material.io/styles/typography/type-scale-tokens
extension TextSize on BuildContext {
ThemeData get theme => Theme.of(this);
TextTheme get textTheme => theme.textTheme;
/// FontSize = 57, FontWeight = 400
TextStyle? get displayLarge => textTheme.displayLarge;
/// FontSize = 52, FontWeight = 400
TextStyle? get displayMedium => textTheme.displayMedium;
/// FontSize = 44, FontWeight = 400
TextStyle? get displaySmall => textTheme.displaySmall;
/// FontSize = 32, FontWeight = 400
TextStyle? get headlineLarge => textTheme.headlineLarge;
/// FontSize = 28, FontWeight = 400
TextStyle? get headlineMedium => textTheme.headlineMedium;
/// FontSize = 24, FontWeight = 400
TextStyle? get headlineSmall => textTheme.headlineSmall;
/// FontSize = 22, FontWeight = 400
TextStyle? get titleLarge => textTheme.titleLarge;
/// FontSize = 16, FontWeight = 500
TextStyle? get titleMedium => textTheme.titleMedium;
/// FontSize = 14, FontWeight = 500
TextStyle? get titleSmall => textTheme.titleSmall;
/// FontSize = 14, FontWeight = 500
TextStyle? get labelLarge => textTheme.labelLarge;
/// FontSize = 12, FontWeight = 500
TextStyle? get labelMedium => textTheme.labelMedium;
/// FontSize = 11, FontWeight = 500
TextStyle? get labelSmall => textTheme.labelSmall;
/// FontSize = 16, FontWeight = 400
TextStyle? get bodyLarge => textTheme.bodyLarge;
/// FontSize = 14, FontWeight = 400
TextStyle? get bodyMedium => textTheme.bodyMedium;
/// FontSize = 12, FontWeight = 400
TextStyle? get bodySmall => textTheme.bodySmall;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment