Text themes in Flutter - Mini App: Build & Ship

Build: Text Theme Demo

This screen shows different text styles using Flutter's text themes. It helps users see how to apply and customize text styles globally.

Target UI

-------------------------
| Text Theme Demo       |
|-----------------------|
| Title Text            |
| Subtitle Text         |
| Body Text             |
| Caption Text          |
| Button Text           |
|-----------------------|

Use Theme.of(context).textTheme to style all text widgets

Display five Text widgets with styles: headline6, subtitle1, bodyText2, caption, button

Use a Scaffold with AppBar titled 'Text Theme Demo'

Center the text widgets vertically with some spacing

Starter Code

Flutter

import 'package:flutter/material.dart';

class TextThemeDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Text Theme Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            // TODO: Add Text widgets with different textTheme styles here
          ],
        ),
      ),
    );
  }
}

Task 1

Task 2

Task 3

Task 4

Task 5

Task 6

Task 7

Solution

Flutter

import 'package:flutter/material.dart';

class TextThemeDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final textTheme = Theme.of(context).textTheme;
    return Scaffold(
      appBar: AppBar(
        title: Text('Text Theme Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('Title Text', style: textTheme.headline6),
            SizedBox(height: 8),
            Text('Subtitle Text', style: textTheme.subtitle1),
            SizedBox(height: 8),
            Text('Body Text', style: textTheme.bodyText2),
            SizedBox(height: 8),
            Text('Caption Text', style: textTheme.caption),
            SizedBox(height: 8),
            Text('Button Text', style: textTheme.button),
          ],
        ),
      ),
    );
  }
}

This code uses Flutter's built-in Theme.of(context).textTheme to style text consistently across the app. Each Text widget uses a different style from the text theme: headline6 for the title, subtitle1 for subtitle, bodyText2 for body text, caption for small caption text, and button style for button text style. The SizedBox widgets add vertical spacing between the texts for better readability. This approach helps maintain a consistent look and feel and makes it easy to update text styles app-wide.

Final Result

Completed Screen

-------------------------
| Text Theme Demo       |
|-----------------------|
| Title Text            |
|                       |
| Subtitle Text         |
|                       |
| Body Text             |
|                       |
| Caption Text          |
|                       |
| Button Text           |
|-----------------------|

Screen shows five lines of text with different styles from the app's text theme

No interactive elements on this screen

Stretch Goal

Add a toggle button in the AppBar to switch between light and dark text themes

💡 Hint

Use a StatefulWidget and ThemeMode to switch themes; update textTheme accordingly