Responsive Typography and Component Theming
Scale text and customize component themes for consistent cross-device branding.
Why Typography Scales
A design system keeps your app's look consistent across phones, foldables, and tablets. Two pillars hold it together: typography (how text looks at every size) and component theming (how buttons, cards, and inputs are styled once and reused everywhere).
In Material 3, both live inside ThemeData. Instead of styling each widget by hand, you define the rules centrally and let widgets inherit them. This lesson shows how to scale text responsively and customize component themes for consistent cross-device branding.
- TextTheme carries the type scale (display, headline, title, body, label).
- Component themes (e.g.
ElevatedButtonThemeData) shape each widget family.
The Material 3 Type Scale
Material 3 defines a type scale of 15 named styles grouped into 5 roles. Each role has Large, Medium, and Small variants:
displayLarge/Medium/Small— big, expressive hero text.headlineLarge/Medium/Small— section headers.titleLarge/Medium/Small— list and dialog titles.bodyLarge/Medium/Small— paragraphs and main content.labelLarge/Medium/Small— buttons, captions, chips.
You read these from context anywhere in your widget tree, so a heading always matches the same scale no matter where it appears.
Widget build(BuildContext context) {
final textTheme = Theme.of(context).textTheme;
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Welcome', style: textTheme.displaySmall),
Text('Your daily summary', style: textTheme.titleMedium),
Text('Here is what happened today.', style: textTheme.bodyMedium),
],
);
}All lessons in this course
- Material 3 Color Schemes and Seed Colors
- Dynamic Color and Adaptive Light/Dark Themes
- Custom ThemeExtension for Brand Tokens
- Responsive Typography and Component Theming