Flutter default font size

Question

I want to have a default font size to the Text widget in Flutter. I know that I can set default font family in theme but there is no default font size parameter.

I just wonder if my custom widget is implemented well or I did it wrong approach?

import 'package:flutter/material.dart';

/// Custom Text with a default font Monospace and a default font size.
class CustomText extends Text {
  /// Custom Text Constructor extend of Text constructor.
  CustomText(this.dataCustom,
      {this.styleCustom = const TextStyle(), this.textAlignCustom})
      : super(dataCustom,
            style: styleCustom.copyWith(fontFamily: 'Monospace', fontSize: 12),
            textAlign: textAlignCustom);

  /// The text to display.
  ///
  /// This will be null if a [textSpan] is provided instead.
  final String dataCustom;

  /// If non-null, the style to use for this text.
  ///
  /// If the style's "inherit" property is true, the style will be merged with
  /// the closest enclosing [DefaultTextStyle]. Otherwise, the style will
  /// replace the closest enclosing [DefaultTextStyle].
  final TextStyle styleCustom;

  /// How the text should be aligned horizontally.
  final TextAlign textAlignCustom;
}

Thanks

score 38 · Answer 1 · answered Apr 19 '20 at 11:06

A Flutter theme defines not one, but many default font sizes. The size used depends on the situation, e.g. a Text widget would normally use body style, but the same widget would use button style if used inside of a button.

I found two ways to increase all font sizes across a Flutter application.

Simple solution: adjust the default theme

MaterialApp(
  theme: ThemeData(
    textTheme: Theme.of(context).textTheme.apply(
          fontSizeFactor: 1.1,
          fontSizeDelta: 2.0,
        ),
  ),
  ...
);

The resulting font size is (originalSize * fontSizeFactor + fontSizeDelta). So in the example above all font sizes are increased by 10% and then additionally by 2.

Solution with more control: define all sizes by hand

MaterialApp(
  theme: ThemeData(
    textTheme: TextTheme(
      bodyText1: TextStyle(fontSize: 18.0),
      bodyText2: TextStyle(fontSize: 16.0),
      button: TextStyle(fontSize: 16.0),
      ...  // and so on for every text style
    ),
  ),
  ...
);

The full list of styles can be found at https://api.flutter.dev/flutter/material/TextTheme-class.html.

This works for the light theme, but for dark theme it changes the color of the text to be unreadable. I think it's because the context theme is light by default. How can we do this for the dark theme too? — intrepidis, Sep 28 '22 at 21:08
@intrepidis try to use context. First get the current theme: `final ThemeData textTheme = Theme.of(context).textTheme;` And then modify it: `theme: ThemeData(textTheme: textTheme.copyWith(bodyText1: textTheme.bodyText1!.copyWith(fontSize: 18.0), ...)` Does this solve the problem? — Andrei Matveiakin, Sep 29 '22 at 17:23

score 19 · Answer 2 · answered May 18 '19 at 02:41

19

I found a better way for default font size by overriding the material text theme.

Reference: https://api.flutter.dev/flutter/material/TextTheme-class.html

For example: body1 is for normal Text widgets so for the red color to all Text widgets

 theme: ThemeData(
        textTheme: TextTheme(body1: TextStyle(backgroundColor: Colors.red))
      )

Result:

answered May 18 '19 at 02:41

amorenew

10,760
10
47
69

1

The OP's problem cries out for a theme. This should be the accepted answer. Very kind of you to give someone else the points but your own answer is better than his. Nice job. Prefer convention over configuration. – Rap May 21 '19 at 21:05
1

This is actually the best answer here. Exactly what was needed. I don't know why isn't it marked as accepted – Konstantin Sep 22 '19 at 07:33
1

This doesn't work everywhere, for example when the Text is a child inside FlatButton. Also, why does the example show how to set default background color when the question is about fontsize? You should use fontSize inside TextStyle – Robin Manoli Nov 23 '19 at 08:39
@RobinManoli My main point is using the Theme so background color is ok as an example – amorenew Nov 24 '19 at 05:49

score 8 · Accepted Answer · answered May 18 '19 at 01:09

You should prefer composition over inheritance.

class Mono12Text extends StatelessWidget {
  final String data;
  final TextAlign align;
  final TextStyle style;

  Mono12Text(
    this.data, {
    this.align,
    TextStyle style = const TextStyle(),
  }) : style = style.copyWith(
          fontFamily: 'Monospace',
          fontSize: 12,
        );

  @override
  Widget build(BuildContext context) {
    return Text(
      data,
      textAlign: align,
      style: style,
    );
  }
}

score 5 · Answer 4 · answered Nov 23 '19 at 10:16

Expanding a bit on amorenew's answer.

You can set the fontSize inside the the MaterialApp() Widget. However note that it will not work inside all widgets, for example Flatbutton and ExpansionTile.

void main() {
  runApp(myApp());
}

class myApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
   return MaterialApp(
        title: "My Flutter App",
        theme: ThemeData(
          textTheme: TextTheme(body1: TextStyle(fontSize: 20.0)),
        ...
   );
  }
}

So if you want the style to be applied also to a FlatButton:

FlatButton(
   child:
      Text("my text",
         style: Theme.of(context).textTheme.body1,
      )
);

And, if you want the fontSize to be applied with other specific styles:

FlatButton(
   child:
      Text("my text",
         style:
            TextStyle(
               fontWeight: FontWeight.bold,
               color: Colors.black,
            fontSize: Theme.of(context).textTheme.body1.fontSize
            )
      )
);

score 5 · Answer 5 · answered Dec 10 '20 at 14:42

There are several possibilities:

1- Using the DefaultTextStyle widget :

Just use this widget as a parent
Example :

 DefaultTextStyle(
      style: TextStyle(
        fontSize: 17,
        fontWeight: FontWeight.bold,
       ),
      child: Text('Hello World') // I don't need to define a style for this Text widget anymore 
 ),

Output :

I don't need to define a style for this Text widget anymore because it will default to the DefaultTextStyle widget style.

See also:
AnimatedDefaultTextStyle, which animates changes in the text style smoothly over a given duration.
DefaultTextStyleTransition, which takes a provided Animation to animate changes in text style smoothly over time.

2- The use of the predefined textTheme :

In fact, all you have to do is choose a predefined textTheme and use or modify it : Each textTheme has a predefined TextStyle that you can use directly or modify before using it.
Here is the list of the predefined textTheme :

 headline1, headline2, headline3, headline4, headline5, headline6, subtitle1, subtitle2, bodyText1, bodyText2, caption, button, overline, display4, display3, display2, display1, headline, title, subhead, subtitle, body2, body1

Usage:

Text('Hello World' , style: Theme.of(context).textTheme.headline6,),

Output :

You can also change the value of this TextStyle and then reuse it.

Modification :

Put it in your MaterialApp widget .

theme: ThemeData(
        textTheme: TextTheme(
          headline6: TextStyle(fontSize: 15 , color: Colors.blue),
          bodyText1: TextStyle(backgroundColor: Colors.red , color: Colors.blue) ,
          )
      ),

Output :

My code is here
Learn more about TextTheme here .

score 1 · Answer 6 · answered Jun 04 '20 at 05:35

You should use DefaultTextStyle widget as a parent widget

The text style to apply to descendant Text widgets which don't have an explicit style

Example on how to use:

return DefaultTextStyle(
              style: TextStyle(fontSize: 42, color: Colors.blue),
              child: (...)
);

Flutter default font size

7 Answers7

Simple solution: adjust the default theme

Solution with more control: define all sizes by hand

Linked

Related