Text Styles From the Theme

Part of the Layout That Fits section of Coddy's Flutter journey. Lesson 23 of 30.

The theme holds text styles as well as colors, in its textTheme. Each style has a name for the job it does, from big to small: displayLarge, headlineMedium, titleLarge, bodyMedium, labelLarge and more.

To use one, read it from the theme and pass it as the style::

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

A Text with no style uses bodyMedium, which is size 14. To change every plain text in the app at once, give the theme your own bodyMedium:

ThemeData(
  textTheme: const TextTheme(
    bodyMedium: TextStyle(fontSize: 16),
  ),
)

Flutter fills in every style you leave out with its default, so you only write the ones you change.

Challenge

Easy

Style the journal from the theme:

make Today use the theme's headlineMedium style
in the ThemeData, make plain text size 18 with your own bodyMedium

Try it yourself

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.green),
      ),
      home: const HomeScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Garden Journal')),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text('Today'),
            const SizedBox(height: 8),
            const Text('Water the tomatoes in the morning.'),
            const Text('Pick the first beans on Friday.'),
          ],
        ),
      ),
    );
  }
}