How do you use the typography styles in Flutter?

In Flutter, the Material Design framework provides a set of predefined typography styles that can be used in your app. 

Material 3 simplified the typography naming by splitting the typescales into five key groups:

1. Display
2. Headline
3. Title
4. Body
5. Label

The following are the 3 typography styles available in Material Design:

• Large: This is a large typeface used for headings and titles.
• Medium: This is a medium-sized typeface used for subheadings and secondary text.
• Small: This is a small typeface used for the main body of text.

To use these typography styles in Flutter, you can use the Text widget and pass the style property with the appropriate TextStyle object that corresponds to the typography style you want to use.

Here's an example of how to use the 3 typography styles in Flutter:

import 'package:flutter/material.dart';

class TypographyScreen extends StatelessWidget {
  const TypographyScreen({super.key});

  @override
  Widget build(BuildContext context) {
    final textTheme = Theme.of(context)
        .textTheme
        .apply(displayColor: Theme.of(context).colorScheme.onSurface);

    return Scaffold(
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(8),
        scrollDirection: Axis.vertical,
        child: Column(
          children: <Widget>[

           
            TextStyleExample(
                name: "Display Large", style: textTheme.displayLarge!),
            TextStyleExample(
                name: "Display Medium", style: textTheme.displayMedium!),
            TextStyleExample(
                name: "Display Small", style: textTheme.displaySmall!),

            TextStyleExample(
                name: "Headline Large", style: textTheme.headlineLarge!),
            TextStyleExample(
                name: "Headline Medium", style: textTheme.headlineMedium!),
            TextStyleExample(
                name: "Headline Small", style: textTheme.headlineSmall!),

            TextStyleExample(name: "Title Large", style: textTheme.titleLarge!),
            TextStyleExample(name: "Title Medium", style: textTheme.titleMedium!),
            TextStyleExample(name: "Title Small", style: textTheme.titleSmall!),

            TextStyleExample(name: "Label Large", style: textTheme.labelLarge!),
            TextStyleExample(name: "Label Medium", style: textTheme.labelMedium!),
            TextStyleExample(name: "Label Small", style: textTheme.labelSmall!),

            TextStyleExample(name: "Body Large", style: textTheme.bodyLarge!),
            TextStyleExample(name: "Body Medium", style: textTheme.bodyMedium!),
            TextStyleExample(name: "Body Small", style: textTheme.bodySmall!),



          ],
        ),
      ),
    );
  }
}

class TextStyleExample extends StatelessWidget {
  const TextStyleExample({
    super.key,
    required this.name,
    required this.style,
  });

  final String name;
  final TextStyle style;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Text(name, style: style.copyWith(letterSpacing: 1.0)),
    );
  }
}

..

• This code is an example of using typography styles in Flutter. It creates a screen that displays different typography styles using the Text widget.

• The code starts by defining the TypographyScreen class, which extends StatelessWidget. The build method of the TypographyScreen returns a Scaffold widget that displays a single child scroll view with a vertical scroll direction. The child of the scroll view is a Column widget that displays multiple instances of the TextStyleExample widget.

• The TextStyleExample class is a custom widget that displays a text string with a specified style. It has two required properties: name and style. The name property is a string that is displayed by the widget, and the style property is the TextStyle object that defines the style of the text.

• In the TypographyScreen class, the text theme is retrieved from the theme data using Theme.of(context).textTheme and then modified using apply to set the display color to the color scheme's on-surface color. The different typography styles available in the theme data are then passed as the style property of the TextStyleExample widget. The TextStyleExample widget displays the name of the typography style and applies the style to the text.

• The code also demonstrates how to modify the TextStyle object by using the copyWith method. In this example, the copyWith method is used to change the font family to "Royale" for the "Display Large" style and to add a letter spacing of 1.0 to all styles.

The names of the TextTheme properties match this table from the Material Design spec.

..

..

GET source code on Github:

..