Text themes in Flutter

Introduction

Text themes help you keep your app's text styles consistent and easy to change in one place.

You want all your app's headings to look the same.

You want to quickly change font size or color for all body text.

You want to support light and dark modes with different text styles.

You want to reuse text styles across many screens.

You want to keep your code clean by avoiding repeated style code.

Syntax

Flutter

ThemeData(
  textTheme: TextTheme(
    headline1: TextStyle(fontSize: 24, fontWeight: FontWeight.bold, color: Colors.black),
    bodyText1: TextStyle(fontSize: 14, color: Colors.grey[800]),
  ),
)

TextTheme groups many text styles like headline1, bodyText1, caption, etc.

You apply these styles in your widgets using Theme.of(context).textTheme.headline1.

Examples

Defines a big bold style for headline1 text.

Flutter

ThemeData(
  textTheme: TextTheme(
    headline1: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
  ),
)

Uses the bodyText1 style from the current theme.

Flutter

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

Overrides bodyText1 color to red locally inside a widget subtree.

Flutter

Theme(
  data: Theme.of(context).copyWith(
    textTheme: TextTheme(
      bodyText1: TextStyle(color: Colors.red),
    ),
  ),
  child: Builder(
    builder: (context) => Text('Red text', style: Theme.of(context).textTheme.bodyText1),
  ),
)

Sample App

This app shows a big blue heading and normal body text using the text theme styles defined in the app's theme.

Flutter

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        textTheme: TextTheme(
          headline1: TextStyle(fontSize: 32, fontWeight: FontWeight.bold, color: Colors.blue),
          bodyText1: TextStyle(fontSize: 16, color: Colors.black87),
        ),
      ),
      home: Scaffold(
        appBar: AppBar(title: Text('Text Themes Example')),
        body: Padding(
          padding: EdgeInsets.all(16),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text('Big Blue Heading', style: Theme.of(context).textTheme.headline1),
              SizedBox(height: 10),
              Text('This is body text styled by the theme.', style: Theme.of(context).textTheme.bodyText1),
            ],
          ),
        ),
      ),
    );
  }
}

Important Notes

You can customize many text styles like headline1, headline2, bodyText1, caption, button, etc.

Use Theme.of(context).textTheme to access the current theme's text styles.

Changing the text theme in ThemeData updates all widgets using those styles automatically.

Summary

Text themes keep text styles consistent across your app.

Define text styles inside ThemeData.textTheme.

Use Theme.of(context).textTheme.styleName to apply styles.