TextStyle class

An immutable style in which paint text.

Text(
  'No, we need bold strokes. We need this plan.',
  style: TextStyle(fontWeight: FontWeight.bold),
)

Text(
  'Welcome to the present, we\'re running a real nation.',
  style: TextStyle(fontStyle: FontStyle.italic),
)

Opacity and Color

Each line here is progressively more opaque. The base color is material.Colors.black, and Color.withOpacity is used to create a derivative color with the desired opacity. The root TextSpan for this RichText widget is explicitly given the ambient DefaultTextStyle, since RichText does not do that automatically. The inner TextStyle objects are implicitly mixed with the parent TextSpan's TextSpan.style.

If color is specified, foreground must be null and vice versa. color is treated as a shorthand for Paint()..color = color.

RichText(
  text: TextSpan(
    style: DefaultTextStyle.of(context).style,
    children: <TextSpan>[
      TextSpan(
        text: 'You don\'t have the votes.\n',
        style: TextStyle(color: Colors.black.withOpacity(0.6)),
      ),
      TextSpan(
        text: 'You don\'t have the votes!\n',
        style: TextStyle(color: Colors.black.withOpacity(0.8)),
      ),
      TextSpan(
        text: 'You\'re gonna need congressional approval and you don\'t have the votes!\n',
        style: TextStyle(color: Colors.black.withOpacity(1.0)),
      ),
    ],
  ),
)

Size

In this example, the ambient DefaultTextStyle is explicitly manipulated to obtain a TextStyle that doubles the default font size.

Text(
  'These are wise words, enterprising men quote \'em.',
  style: DefaultTextStyle.of(context).style.apply(fontSizeFactor: 2.0),
)

Line height

The height property can be used to change the line height. Here, the line height is set to 100 logical pixels, so that the text is very spaced out.

Text(
  'Don\'t act surprised, you guys, cuz I wrote \'em!',
  style: TextStyle(height: 100.0),
)

Wavy red underline with black text

Styles can be combined. In this example, the misspelt word is drawn in black text and underlined with a wavy red line to indicate a spelling error. (The remainder is styled according to the Flutter default text styles, not the ambient DefaultTextStyle, since no explicit style is given and RichText does not automatically use the ambient DefaultTextStyle.)

RichText(
  text: TextSpan(
    text: 'Don\'t tax the South ',
    children: <TextSpan>[
      TextSpan(
        text: 'cuz',
        style: TextStyle(
          color: Colors.black,
          decoration: TextDecoration.underline,
          decorationColor: Colors.red,
          decorationStyle: TextDecorationStyle.wavy,
        ),
      ),
      TextSpan(
        text: ' we got it made in the shade',
      ),
    ],
  ),
)

Custom Fonts

Custom fonts can be declared in the pubspec.yaml file as shown below:

flutter:
  fonts:
    - family: Raleway
      fonts:
        - asset: fonts/Raleway-Regular.ttf
        - asset: fonts/Raleway-Medium.ttf
          weight: 500
        - asset: assets/fonts/Raleway-SemiBold.ttf
          weight: 600
     - family: Schyler
       fonts:
         - asset: fonts/Schyler-Regular.ttf
         - asset: fonts/Schyler-Italic.ttf
           style: italic

The family property determines the name of the font, which you can use in the fontFamily argument. The asset property is a path to the font file, relative to the pubspec.yaml file. The weight property specifies the weight of the glyph outlines in the file as an integer multiple of 100 between 100 and 900. This corresponds to the FontWeight class and can be used in the fontWeight argument. The style property specifies whether the outlines in the file are italic or normal. These values correspond to the FontStyle class and can be used in the fontStyle argument.

To select a custom font, create TextStyle using the fontFamily argument as shown in the example below:

const TextStyle(fontFamily: 'Raleway')

To use a font family defined in a package, the package argument must be provided. For instance, suppose the font declaration above is in the pubspec.yaml of a package named my_package which the app depends on. Then creating the TextStyle is done as follows:

const TextStyle(fontFamily: 'Raleway', package: 'my_package')

If the package internally uses the font it defines, it should still specify the package argument when creating the text style as in the example above.

A package can also provide font files without declaring a font in its pubspec.yaml. These files should then be in the lib/ folder of the package. The font files will not automatically be bundled in the app, instead the app can use these selectively when declaring a font. Suppose a package named my_package has:

lib/fonts/Raleway-Medium.ttf

Then the app can declare a font like in the example below:

flutter:
  fonts:
    - family: Raleway
      fonts:
        - asset: assets/fonts/Raleway-Regular.ttf
        - asset: packages/my_package/fonts/Raleway-Medium.ttf
          weight: 500

The lib/ is implied, so it should not be included in the asset path.

In this case, since the app locally defines the font, the TextStyle is created without the package argument:

const TextStyle(fontFamily: 'Raleway')

See also:

• Text, the widget for showing text in a single style.
• DefaultTextStyle, the widget that specifies the default text styles for Text widgets, configured using a TextStyle.
• RichText, the widget for showing a paragraph of mix-style text.
• TextSpan, the class that wraps a TextStyle for the purposes of passing it to a RichText.