다크 테마

Coddy Flutter 여정의 화면 크기에 맞는 레이아웃 섹션에 포함된 레슨. 30개 중 24번째.

많은 사람이 특히 밤에는 휴대전화를 다크 모드로 설정해 둡니다. 앱에는 두 가지 테마가 있을 수 있습니다. 밝은 테마에는 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에 어두운 분위기를 적용하세요:

시드 Colors.indigo를 사용하고 brightness: Brightness.dark로 설정한 darkTheme:
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)),
        ),
      ),
    );
  }
}