Summary - ThemeData

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,
  ),
)

Exercise 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.

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(
        brightness: Brightness.dark,
        colorScheme: ColorScheme.fromSeed(
          seedColor: Colors.blue,
          brightness: Brightness.dark,
        ),
      ),
      home: const Scaffold(body: Center(child: Text('Merhaba'))),
    );
  }
}

void main() {
  print('hazir');
}

Test yourself

Which field is set in ThemeData for a dark theme?
- primarySwatch
- platform
- brightness
- textTheme
Show answer

brightness — 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.

The dark theme value

ThemeData(
  brightness: ____,
  colorScheme: ColorScheme.fromSeed(
    seedColor: Colors.blue,
    brightness: Brightness.dark,
  ),
)

Show answer

ThemeData(
  brightness: Brightness.dark,
  colorScheme: ColorScheme.fromSeed(
    seedColor: Colors.blue,
    brightness: Brightness.dark,
  ),
)

Summary parts

ThemeData

Theme definition
ColorScheme

Color palette
brightness

Light/dark mode
Theme.of

Theme access

Next lesson: showDialog

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies