Un tema oscuro

Parte de la sección Diseños que se adaptan del Journey de Flutter de Coddy. Lección 24 de 30.

Mucha gente mantiene su teléfono en modo oscuro, especialmente por la noche. Una aplicación puede tener dos temas: theme: para el claro y darkTheme: para el oscuro.

Un esquema de colores oscuro se obtiene de la misma semilla, con un ajuste más:

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 invierte el esquema: una surface oscura con texto claro en onSurface, y tonos más suaves de la semilla que no deslumbran.

themeMode: elige qué tema se usa. ThemeMode.system, el valor predeterminado, sigue el ajuste del teléfono; ThemeMode.light y ThemeMode.dark eligen uno independientemente de lo que indique el teléfono. Todos los widgets que leen el tema cambian con él.

Desafío

Fácil

Dale a Night Reader un aspecto oscuro:

un darkTheme: a partir de la semilla Colors.indigo con brightness: Brightness.dark
themeMode: ThemeMode.dark, para que siempre esté oscuro

Pruébalo tú mismo

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