Тёмная тема

Часть раздела Адаптивная компоновка путешествия по Flutter на Coddy. Урок 24 из 30.

Многие люди используют тёмный режим на телефоне, особенно ночью. В приложении могут быть две темы: theme: для светлого режима и darkTheme: для тёмного.

Тёмная цветовая схема создаётся на основе того же начального цвета с ещё одной настройкой:

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 меняет схему на противоположную: тёмный surface со светлым текстом onSurface и более мягкими оттенками начального цвета, которые не режут глаза.

themeMode: выбирает используемую тему. ThemeMode.system, значение по умолчанию, следует настройке телефона; ThemeMode.light и ThemeMode.dark выбирают тему независимо от настройки телефона. Каждый виджет, который считывает тему, меняется вместе с ней.

Задание

Легко

Придайте Night Reader тёмный вид:

добавьте darkTheme: на основе исходного значения Colors.indigo с параметром brightness: Brightness.dark
установите themeMode: ThemeMode.dark, чтобы тема всегда была тёмной

Попробуйте сами

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