Ein dunkles Theme

Teil des Abschnitts Layouts für jede Bildschirmgröße der Flutter-Journey von Coddy. Lektion 24 von 30.

Viele Menschen verwenden auf ihrem Smartphone den Dunkelmodus, besonders nachts. Eine App kann zwei Themes haben: theme: für hell und darkTheme: für dunkel.

Ein dunkles Farbschema wird aus demselben Startwert abgeleitet, mit einer zusätzlichen Einstellung:

MaterialApp(
  theme: ThemeData(
    colorScheme: ColorScheme.fromSeed(seedColor: Colors.red),
  ),
  darkTheme: ThemeData(
    colorScheme: ColorScheme.fromSeed(
      seedColor: Colors.red,
      brightness: Brightness.dark,
    ),
  ),
  themeMode: ThemeMode.dark,
  home: ...,
)

brightness: Brightness.dark kehrt das Schema um: eine dunkle surface mit hellem Text auf onSurface und sanftere Töne des Startwerts, die nicht blenden.

themeMode: wählt aus, welches Theme verwendet wird. ThemeMode.system, die Standardeinstellung, richtet sich nach der Einstellung des Smartphones; ThemeMode.light und ThemeMode.dark wählen unabhängig von der Einstellung des Smartphones jeweils ein Theme aus. Jedes Widget, das das Theme ausliest, ändert sich entsprechend.

Aufgabe

Einfach

Verleihe Night Reader ein dunkles Erscheinungsbild:

ein darkTheme: mit dem Seed Colors.indigo und brightness: Brightness.dark
themeMode: ThemeMode.dark, damit es immer dunkel ist

Probier es selbst

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.indigo),
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text('Night Reader')),
        body: const Center(
          child: Text('Good evening', style: TextStyle(fontSize: 28)),
        ),
      ),
    );
  }
}