Ciemny motyw

Część sekcji Układ dopasowany do ekranu ścieżki Flutter w Coddy. Lekcja 24 z 30.

Wiele osób używa ciemnego motywu w telefonie, zwłaszcza w nocy. Aplikacja może mieć dwa motywy: theme: dla jasnego i darkTheme: dla ciemnego.

Ciemna kolorystyka powstaje z tego samego ziarna, z dodatkowym ustawieniem:

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 odwraca kolorystykę: ciemna surface z jasnym tekstem onSurface oraz łagodniejsze odcienie ziarna, które nie rażą w oczy.

themeMode: wybiera używany motyw. Domyślne ThemeMode.system stosuje się do ustawienia telefonu; ThemeMode.light i ThemeMode.dark wybierają jeden z motywów niezależnie od ustawień telefonu. Każdy widżet korzystający z motywu zmienia się razem z nim.

Wyzwanie

Łatwy

Nadaj Night Reader ciemny wygląd:

darkTheme: z wartością początkową Colors.indigo i ustawieniem brightness: Brightness.dark
themeMode: ThemeMode.dark, aby zawsze był ciemny

Spróbuj swoich sił

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