Tema Gelap

Termasuk bagian Layout yang Menyesuaikan dalam perjalanan Flutter di Coddy. Pelajaran 24 dari 30.

Banyak orang menggunakan mode gelap di ponsel, terutama pada malam hari. Aplikasi bisa memiliki dua tema: theme: untuk terang dan darkTheme: untuk gelap.

Skema warna gelap berasal dari seed yang sama, dengan satu pengaturan tambahan:

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 membalik skemanya: surface yang gelap dengan teks onSurface yang terang, serta corak warna seed yang lebih lembut dan tidak menyilaukan.

themeMode: memilih tema yang digunakan. ThemeMode.system, pilihan bawaan, mengikuti pengaturan ponsel; ThemeMode.light dan ThemeMode.dark memilih tema tertentu apa pun pengaturan ponselnya. Setiap widget yang membaca tema akan ikut berubah.

Tantangan

Mudah

Beri Night Reader tampilan gelap:

darkTheme: dari seed Colors.indigo dengan brightness: Brightness.dark
themeMode: ThemeMode.dark, agar tampilannya selalu gelap

Coba sendiri

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