다크 모드 전환 스위치

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

어떤 사람들은 다른 앱은 그대로 두고 하나의 앱만 다크 모드로 사용하고 싶어 합니다. 전환 스위치를 제공하세요.

themeMode:는 다른 설정과 마찬가지로 상태에서 가져올 수 있는 설정입니다. MaterialApp을 빌드하는 위젯인 MyApp의 State에 bool을 두고, 그 값에 따라 모드를 선택하세요.

bool _dark = false;

MaterialApp(
  themeMode: _dark ? ThemeMode.dark : ThemeMode.light,
  ...
)

전환 스위치가 setState 안에서 _dark를 변경하면 build가 다시 실행되고, MaterialApp에 새 모드가 적용되어 모든 화면의 테마가 짧은 페이드 효과와 함께 한꺼번에 바뀝니다.

테마를 선택하는 곳이 MaterialApp이므로 상태는 그 위에 있어야 합니다. 그래서 여기서 MyApp은 StatefulWidget입니다.

챌린지

쉬움

스위치를 눌러 테마를 전환하세요:

onChanged에서 새 값을 setState 내부의 _dark에 저장하세요
MaterialApp의 themeMode:를 _dark에 따라 설정하세요. 값이 true이면 다크 모드로, false이면 라이트 모드로 설정하세요

직접 해보기

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _dark = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.indigo),
      ),
      darkTheme: ThemeData(
        colorScheme: ColorScheme.fromSeed(
          seedColor: Colors.indigo,
          brightness: Brightness.dark,
        ),
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text('Night Reader')),
        body: Center(
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              const Text('Dark mode', style: TextStyle(fontSize: 20)),
              const SizedBox(width: 12),
              Switch(
                value: _dark,
                onChanged: (value) {},
              ),
            ],
          ),
        ),
      ),
    );
  }
}