Karanlık Tema

Coddy'nin Flutter Journey'sinin Her Ekrana Uyan Düzenler bölümünün bir parçası. Ders 24 / 30.

Birçok kişi, özellikle geceleri, telefonunu koyu modda kullanır. Bir uygulamanın iki teması olabilir: açık tema için theme: ve koyu tema için darkTheme:.

Koyu renk düzeni aynı tohum renginden, bir ayar daha eklenerek elde edilir:

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 renk düzenini tersine çevirir: koyu bir surface üzerinde açık renkli onSurface metni ve göz almayan, tohum renginin daha yumuşak tonları kullanılır.

themeMode: hangi temanın kullanılacağını belirler. Varsayılan olan ThemeMode.system, telefonun ayarını izler; ThemeMode.light ve ThemeMode.dark ise telefonun ayarından bağımsız olarak ilgili temayı seçer. Temayı okuyan her bileşen de onunla birlikte değişir.

Görev

Kolay

Night Reader'a koyu bir görünüm kazandır:

Colors.indigo tohumu kullanarak brightness: Brightness.dark içeren bir darkTheme:
themeMode: ThemeMode.dark; böylece tema her zaman koyu olur

Kendin dene

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