Un tema scuro

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

Molte persone tengono il telefono in modalità scura, soprattutto di notte. Un'app può avere due temi: theme: per la modalità chiara e darkTheme: per quella scura.

Una combinazione di colori scura deriva dallo stesso seme, con un'impostazione in più:

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 inverte la combinazione: una surface scura con testo chiaro onSurface e tonalità più tenui del seme, che non abbagliano.

themeMode: sceglie quale tema viene usato. ThemeMode.system, l'impostazione predefinita, segue l'impostazione del telefono; ThemeMode.light e ThemeMode.dark ne scelgono uno indipendentemente da ciò che indica il telefono. Ogni widget che legge il tema cambia di conseguenza.

Sfida

Facile

Dai a Night Reader un aspetto scuro:

un darkTheme: basato sul seme Colors.indigo con brightness: Brightness.dark
themeMode: ThemeMode.dark, così sarà sempre scuro

Provalo tu

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