colorScheme
- Flutter course
- Intermediate
- Lesson 87/99
- 4 min
Build a color palette with ColorScheme.
What is ColorScheme?
ColorScheme is the object that defines an app's color palette. primary sets the main color and surface sets the color of surfaces like cards and backgrounds. With ColorScheme.fromSeed(seedColor: ...) you generate the whole palette automatically from a single seed color.
ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.teal),
)This method produces a balanced Material 3 compliant palette.
primary and surface colors
The primary color is used for emphasized elements like buttons and AppBar. The surface color is used for surfaces like cards, dialogs, and backgrounds. ColorScheme.fromSeed computes these colors automatically from the seed.
final cs = ColorScheme.fromSeed(seedColor: Colors.orange);
print(cs.primary); // orange tone
print(cs.surface); // light surface colorThese two colors establish the visual hierarchy of the app.
Practice Theme with ColorScheme
Define a StatelessWidget named Uygulama. Its build method should return a MaterialApp. Set its theme to a ThemeData whose colorScheme field is ColorScheme.fromSeed(seedColor: Colors.blue). 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 colorScheme 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(
colorScheme: ColorScheme.fromSeed(seedColor: 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 does ColorScheme.fromSeed produce?
- A Future object
- Text styles
- A color palette Correct answer
- Navigation routes
Explanation: ColorScheme.fromSeed generates all palette colors like primary and surface from a single seed color. Text styles are TextTheme's job, navigation routes are GoRouter's, and Future belongs to async operations.
2 The ColorScheme.fromSeed call
colorScheme: ____(seedColor: Colors.blue),colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),Explanation: ColorScheme.fromSeed is the method that generates a palette from a seed color. There is no class called ColorPalette, ThemeData is the theme object, and Colors contains color constants; none of these generate a palette.
3 ColorScheme parts
| Term | Meaning |
|---|---|
ColorScheme |
Color palette class |
primary |
Primary color |
surface |
Surface color |
fromSeed |
Palette generation from a seed |