Ein Dunkelmodus-Schalter

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

Manche möchten den Dunkelmodus in einer App, aber nicht in den anderen. Gib ihnen einen Schalter.

themeMode: ist eine Einstellung wie jede andere und kann daher aus dem Zustand stammen. Lege ein bool im State von MyApp ab, dem Widget, das die MaterialApp erstellt, und wähle den Modus daraus aus:

bool _dark = false;

MaterialApp(
  themeMode: _dark ? ThemeMode.dark : ThemeMode.light,
  ...
)

Wenn der Schalter _dark innerhalb von setState ändert, wird build erneut ausgeführt, die MaterialApp erhält den neuen Modus und jeder Bildschirm wechselt gleichzeitig mit einer kurzen Überblendung das Design.

Der Zustand muss oberhalb von MaterialApp liegen, weil dort das Design ausgewählt wird. Deshalb ist MyApp hier ein StatefulWidget.

Aufgabe

Einfach

Lass den Schalter das Design umschalten:

Speichere in onChanged den neuen Wert innerhalb von setState in _dark.
Lege den Wert von themeMode: in MaterialApp anhand von _dark fest: dunkel, wenn der Wert true ist, hell, wenn er false ist.

Probier es selbst

import 'package:flutter/material.dart';

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _dark = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.indigo),
      ),
      darkTheme: ThemeData(
        colorScheme: ColorScheme.fromSeed(
          seedColor: Colors.indigo,
          brightness: Brightness.dark,
        ),
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text('Night Reader')),
        body: Center(
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              const Text('Dark mode', style: TextStyle(fontSize: 20)),
              const SizedBox(width: 12),
              Switch(
                value: _dark,
                onChanged: (value) {},
              ),
            ],
          ),
        ),
      ),
    );
  }
}