Um tema escuro

Parte da seção Layouts que se adaptam do Journey de Flutter da Coddy. Lição 24 de 30.

Muitas pessoas deixam o celular no modo escuro, especialmente à noite. Um aplicativo pode ter dois temas: theme: para o claro e darkTheme: para o escuro.

Um esquema de cores escuro vem da mesma semente, com mais uma configuração:

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 o esquema: uma surface escura com texto claro em onSurface e tons mais suaves da semente, que não ofuscam.

themeMode: escolhe qual tema será usado. ThemeMode.system, o padrão, segue a configuração do celular; ThemeMode.light e ThemeMode.dark escolhem um tema independentemente do que o celular indicar. Todos os widgets que leem o tema mudam junto com ele.

Desafio

Fácil

Dê ao Night Reader uma aparência escura:

um darkTheme: com base na semente Colors.indigo e com brightness: Brightness.dark
themeMode: ThemeMode.dark, para que ele esteja sempre no modo escuro

Experimente você mesmo

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