Un thème sombre

Fait partie de la section Des mises en page adaptées du Journey Flutter de Coddy. Leçon 24 sur 30.

Beaucoup de personnes gardent leur téléphone en mode sombre, surtout la nuit. Une application peut avoir deux thèmes : theme: pour le clair et darkTheme: pour le sombre.

Une palette de couleurs sombre provient de la même graine, avec un réglage supplémentaire :

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 inverse la palette : une surface sombre avec un texte onSurface clair, et des tons plus doux de la graine qui n’éblouissent pas.

themeMode: choisit le thème utilisé. ThemeMode.system, la valeur par défaut, suit le réglage du téléphone ; ThemeMode.light et ThemeMode.dark en sélectionnent un, quel que soit le choix du téléphone. Chaque widget qui lit le thème change avec lui.

Défi

Facile

Donne à Night Reader une apparence sombre :

un darkTheme: à partir de la couleur de départ Colors.indigo avec brightness: Brightness.dark
themeMode: ThemeMode.dark, afin qu’il soit toujours en mode sombre

Essayez vous-même

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