What is ThemeData?
- Flutter course
- Intermediate
- Lesson 86/99
- 4 min
Define app-wide theme with ThemeData.
What is ThemeData?
ThemeData is the object that defines the overall look of a Flutter app. Colors, text styles, and widget defaults are gathered here. When you pass a ThemeData to the theme parameter of MaterialApp, all widgets in the app use this theme.
MaterialApp(
theme: ThemeData(primarySwatch: Colors.blue),
home: Scaffold(body: Center(child: Text('Merhaba'))),
)This way instead of specifying colors and styles on each screen, you manage everything from one place.
Connecting theme to MaterialApp
To connect ThemeData to the app you use the theme parameter of MaterialApp. This parameter takes a ThemeData object. By providing basic fields like primarySwatch you set the look of all Material widgets.
MaterialApp(
theme: ThemeData(
primarySwatch: Colors.indigo,
),
home: AnaEkran(),
)This configuration sets the default color of widgets like AppBar and FloatingActionButton.
Practice MaterialApp with ThemeData
Define a StatelessWidget named Uygulama. Its build method should return a MaterialApp. Set its theme to ThemeData(primarySwatch: Colors.blue) and its home to Scaffold(body: Center(child: Text('Merhaba'))). Print 'hazir' in main.
Starter code
import 'package:flutter/material.dart';
// Uygulama StatelessWidget tanımla
// build MaterialApp döndürsün
// theme parametresi tema alsın
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(primarySwatch: Colors.blue),
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 is the main purpose of ThemeData?
- To send a network request
- To play an animation
- To establish a database connection
- To define the app-wide look Correct answer
Explanation: ThemeData defines the app's colors, text, and widget defaults. Database, network requests, and animation are not ThemeData's concern.
2 ThemeData definition
theme: ____(primarySwatch: Colors.blue),theme: ThemeData(primarySwatch: Colors.blue),Explanation: The theme parameter takes a ThemeData object. Navigator is for routing, Scaffold is a screen skeleton, and Material is a widget; none of these are theme definitions.
3 ThemeData parts
| Term | Meaning |
|---|---|
ThemeData |
Theme definition |
colorScheme |
Color palette |
textTheme |
Text styles |
primarySwatch |
Primary color shade |