textTheme
- Flutter course
- Intermediate
- Lesson 88/99
- 4 min
Define heading and body styles with TextTheme.
What is TextTheme?
TextTheme lets you define the text styles of an app from a single place. It contains fields like bodyLarge for large body text and headlineLarge for large headlines. When you pass a TextTheme to the textTheme parameter of ThemeData, all Text widgets use these styles by default.
ThemeData(
textTheme: const TextTheme(
bodyLarge: TextStyle(fontSize: 16),
),
)This approach makes text consistency easy.
bodyLarge and headlineLarge
TextTheme has a field for each text role. bodyLarge is for large body text and headlineLarge is for large headlines. Each field takes a TextStyle where you set font size, weight, and color.
const TextTheme(
bodyLarge: TextStyle(fontSize: 16),
headlineLarge: TextStyle(fontSize: 32, fontWeight: FontWeight.bold),
)You apply these styles to widgets via Theme.of(context).textTheme.
Practice Theme with TextTheme
Define a StatelessWidget named Uygulama. Its build method should return a MaterialApp. Set its theme to a ThemeData whose textTheme field is a TextTheme containing bodyLarge: TextStyle(fontSize: 16). Use Scaffold(body: Center(child: Text('Merhaba'))) as home. Print 'hazir' in main.
Starter code
import 'package:flutter/material.dart';
// Uygulama StatelessWidget tanımla
// build MaterialApp döndürsün
// theme içinde textTheme kullan
void main() {
// 'hazir' yazdır
}Sample solution
import 'package:flutter/material.dart';
class Uygulama extends StatelessWidget {
const Uygulama({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
textTheme: const TextTheme(
bodyLarge: TextStyle(fontSize: 16),
),
),
home: const Scaffold(body: Center(child: Text('Merhaba'))),
);
}
}
void main() {
print('hazir');
}Expected output
hazir
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What kind of data does TextTheme contain?
- Text styles Correct answer
- Button styles
- Navigation routes
- Database tables
Explanation: TextTheme contains TextStyle objects; fields like bodyLarge and headlineLarge hold text styles. Navigation, button styles, and databases are unrelated to TextTheme.
2 TextTheme field
const TextTheme(
____: TextStyle(fontSize: 16),
),const TextTheme(
bodyLarge: TextStyle(fontSize: 16),
),Explanation: In Material 3 TextTheme, the large body style is specified with the bodyLarge field. bodyText1 is the old Material 2 name, and textLarge and bodyStyle are not TextTheme fields.
3 TextTheme parts
| Term | Meaning |
|---|---|
TextTheme |
Set of text styles |
bodyLarge |
Large body style |
headlineLarge |
Large headline style |
TextStyle |
Single text style |