Flutter
textTheme
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.
Exercise 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.
Show example 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');
}
Test yourself
-
What kind of data does TextTheme contain?
- Text styles
- Button styles
- Navigation routes
- Database tables
Show answer
Text styles — TextTheme contains TextStyle objects; fields like bodyLarge and headlineLarge hold text styles. Navigation, button styles, and databases are unrelated to TextTheme.
-
TextTheme field
const TextTheme(
____: TextStyle(fontSize: 16),
),
Show answer
const TextTheme(
bodyLarge: TextStyle(fontSize: 16),
),
-
TextTheme parts
- TextTheme
- Set of text styles
- bodyLarge
- Large body style
- headlineLarge
- Large headline style
- TextStyle
- Single text style
Next lesson: Theme.of
