Flutter Question posted in
The official Flutter documentation can be found here.

flutter: how to set font size larger (bigger)

TextStyle(fontSize: 16)

Is there a way to set fontSize bigger than normal instead of hard-coded size? For web:

font-size: larger
Tags:

2

Answers


  1. 0

    You can use default text sizes of the Theme:

    Text('Hi There', style: Theme.of(context).textTheme.titleLarge)

    There are different textTheme Text Styles like:

    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,
TextStyle? labelMedium,
TextStyle? labelSmall,

    Each of the above Text Style has a different font size.

    If textTheme is not applied in your ThemeData, defaults will be applied.

    Hope it helps you.

    Login or Signup to reply.
  2. 0

    I think you are not want to give fontsize hardcoded into TestStyle like this,

    TextStyle(fontSize: 16)

    instead, you want to do like this,

    TextStyle(fontSize: larger)

    where larger is an int-typed variable where 16 is set.
    For achieving your desired goal, you can do like this,

    int xxxSmall = 1;
int xxSmall = 2;
int xSmall = 4;
int small = 8;
int medium = 12;
int large = 16;
int xLarge = 24;
int xxLarge  = 40;
int xxxLarge  = 65;

    Then you can use it in TextStyle. But this way of using is not standard because globally declared things are not good practice. so that what you can do is, make a class where all of these values hold and use these value through that class,

    /// Default Spacing in App UI.
abstract class AppSpacing {
  /// The default unit of spacing
  static const double spaceUnit = 16;

  /// xxxs spacing value (1pt)
  static const double xxxs = 0.0625 * spaceUnit;

  /// xxs spacing value (2pt)
  static const double xxs = 0.125 * spaceUnit;

  /// xs spacing value (4pt)
  static const double xs = 0.25 * spaceUnit;

  /// sm spacing value (8pt)
  static const double sm = 0.5 * spaceUnit;

  /// md spacing value (12pt)
  static const double md = 0.75 * spaceUnit;

  /// lg spacing value (16pt)
  static const double lg = spaceUnit;

  /// xlg spacing value (24pt)
  static const double xlg = 1.5 * spaceUnit;

  /// xxlg spacing value (40pt)
  static const double xxlg = 2.5 * spaceUnit;

  /// xxxlg pacing value (64pt)
  static const double xxxlg = 4 * spaceUnit;
}

    Now you can use this class instance and provide your TestStyle fontsize through this class,

    TextStyle(fontSize: AppSpacing.lg)

    Also, you can create some pre-define TestStyle for re-using,

    abstract class AppTextStyle {
  static const TextStyle xs = TextStyle(fontSize: AppSpacing.xs);
  static const TextStyle sm = TextStyle(fontSize: AppSpacing.sm);
  static const TextStyle md = TextStyle(fontSize: AppSpacing.md);
  static const TextStyle lg = TextStyle(fontSize: AppSpacing.lg);
  static const TextStyle xlg = TextStyle(fontSize: AppSpacing.xlg);
}

    Again, you can create some extension that make better usability,

    extension TextStyleHelpers on TextStyle {
  TextStyle font(double value) => copyWith(fontSize: value);
}

    then you can give fontsize so much easily,

    Theme.of(context).textTheme.headlineLarge?.font(AppSpacing.xs)

    Now, you can do much more from here. You can make another extension on BuildContext where you can access this Theme and TextTheme for more better usability,

    extension ThemeX on BuildContext {
  ThemeData get theme => Theme.of(this);

  TextTheme get textTheme => theme.textTheme;

  TextStyle get headlineLarge => textTheme.headlineLarge!;
}

    After that, you can use it like this,

    Text(
   "This is the text",
   style: context.headlineLarge!.font(AppSpacing.lg),
)

    Now, you have a better solution for the overall TestStyle, although
    there are many more hardcoded things you have to do but it’s only one
    time to do and you can also use this for your other projects. So, You
    have to do it once and use it every time which will be more
    time-saving. And also your code will be more readable and organized.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search