Summary - ThemeData
- Flutter course
- Intermediate
- Lesson 90/99
- 4 min
Combine ThemeData and ColorScheme to build a dark theme.
Dark theme
To build a dark theme you set the brightness field of ThemeData to Brightness.dark and provide a matching ColorScheme. By passing brightness: Brightness.dark to ColorScheme.fromSeed you generate a dark palette from the seed. With Theme.of(context), widgets automatically adapt to the dark theme.
ThemeData(
brightness: Brightness.dark,
colorScheme: ColorScheme.fromSeed(
seedColor: Colors.blue,
brightness: Brightness.dark,
),
)Practice Dark theme app
Define a StatelessWidget named Uygulama. Its build method should return a MaterialApp. Set its theme to a ThemeData whose brightness field is Brightness.dark and whose colorScheme field is ColorScheme.fromSeed(seedColor: Colors.blue, brightness: Brightness.dark). 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 koyu tema olsun
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(
brightness: Brightness.dark,
colorScheme: ColorScheme.fromSeed(
seedColor: Colors.blue,
brightness: Brightness.dark,
),
),
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 Which field is set in ThemeData for a dark theme?
- primarySwatch
- platform
- brightness Correct answer
- textTheme
Explanation: Setting brightness to Brightness.dark switches the theme to dark mode. textTheme is for text styles, primarySwatch is the primary color shade, and platform specifies the target platform; none of these directly control dark mode.
2 The dark theme value
ThemeData(
brightness: ____,
colorScheme: ColorScheme.fromSeed(
seedColor: Colors.blue,
brightness: Brightness.dark,
),
)ThemeData(
brightness: Brightness.dark,
colorScheme: ColorScheme.fromSeed(
seedColor: Colors.blue,
brightness: Brightness.dark,
),
)Explanation: For a dark theme you use brightness: Brightness.dark. Brightness.light is light mode, Colors.black is a color not a brightness, and ThemeData.dark is a separate constructor name but here the brightness field expects a value.
3 Summary parts
| Term | Meaning |
|---|---|
ThemeData |
Theme definition |
ColorScheme |
Color palette |
brightness |
Light/dark mode |
Theme.of |
Theme access |