Переключатель тёмного режима

Часть раздела Адаптивная компоновка путешествия по Flutter на Coddy. Урок 25 из 30.

Некоторым пользователям нужен тёмный режим в одном приложении, но не в остальных. Дайте им переключатель.

themeMode: — это такая же настройка, как и любая другая, поэтому её значение может поступать из состояния. Храните bool в состоянии State виджета MyApp, который создаёт MaterialApp, и выбирайте режим на его основе:

bool _dark = false;

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

Когда переключатель меняет значение _dark внутри setState, функция build запускается снова, MaterialApp получает новый режим, и тема на всех экранах меняется одновременно с коротким затуханием.

Состояние должно находиться выше MaterialApp, потому что именно там выбирается тема. Поэтому здесь MyApp — это StatefulWidget.

Задание

Легко

Сделай так, чтобы переключатель менял тему:

в onChanged сохрани новое значение в _dark внутри setState
задай themeMode: у MaterialApp на основе _dark: тёмная, если значение true, светлая, если false

Попробуйте сами

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