Un interruttore per la modalità scura

Fa parte della sezione Layout adattabili del percorso Flutter di Coddy. Lezione 25 di 30.

Alcune persone vogliono la modalità scura in un'app, ma non nelle altre. Offri loro un interruttore.

themeMode: è un'impostazione come tutte le altre, quindi può provenire dallo stato. Mantieni un bool nello State di MyApp, il widget che crea il MaterialApp, e scegli la modalità in base a esso:

bool _dark = false;

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

Quando l'interruttore modifica _dark all'interno di setState, build viene eseguito di nuovo, MaterialApp riceve la nuova modalità e tutte le schermate cambiano tema contemporaneamente, con una breve dissolvenza.

Lo stato deve trovarsi sopra MaterialApp, perché è lì che viene scelto il tema. Ecco perché qui MyApp è un StatefulWidget.

Sfida

Facile

Fai in modo che l'interruttore cambi il tema:

in onChanged, memorizza il nuovo valore in _dark all'interno di setState
imposta themeMode: di MaterialApp in base a _dark: scuro quando è true, chiaro quando è false

Provalo tu

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