Przełącznik trybu ciemnego

Część sekcji Układ dopasowany do ekranu ścieżki Flutter w Coddy. Lekcja 25 z 30.

Niektórzy chcą używać trybu ciemnego w jednej aplikacji, a w pozostałych nie. Daj im przełącznik.

themeMode: to ustawienie jak każde inne, więc może pochodzić ze stanu. Przechowuj wartość bool w stanie State komponentu MyApp, widżetu, który tworzy MaterialApp, i na jej podstawie wybieraj tryb:

bool _dark = false;

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

Gdy przełącznik zmieni wartość _dark wewnątrz setState, metoda build uruchomi się ponownie, MaterialApp otrzyma nowy tryb, a motyw na każdym ekranie zmieni się jednocześnie, z krótkim efektem zanikania.

Stan musi znajdować się nad MaterialApp, ponieważ to właśnie tam wybierany jest motyw. Dlatego w tym przypadku MyApp jest widżetem StatefulWidget.

Wyzwanie

Łatwy

Spraw, aby przełącznik zmieniał motyw:

w onChanged zapisz nową wartość w _dark wewnątrz setState
ustaw themeMode: w MaterialApp na podstawie _dark: ciemny, gdy ma wartość true, jasny, gdy ma wartość false

Spróbuj swoich sił

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) {},
              ),
            ],
          ),
        ),
      ),
    );
  }
}