스위치로 켜고 끄기

Coddy Flutter 여정의 앱에 상호작용 추가하기 섹션에 포함된 레슨. 34개 중 27번째.

Switch는 휴대폰 설정에서 볼 수 있는 켜기/끄기 토글입니다. bool 값을 표시하고, 누군가 토글할 때 알려줍니다:

Switch(
  value: _wifi,
  onChanged: (bool value) {
    setState(() {
      _wifi = value;
    });
  },
)

value:는 스위치가 어떻게 표시되는지를 지정합니다. true이면 켜지고, false이면 꺼집니다. 스위치를 누르면 onChanged가 새 값을 받습니다.

스위치는 저절로 움직이지 않습니다. 스위치를 누르면 onChanged만 호출됩니다. setState로 새 값을 저장하면 화면이 다시 빌드되고 스위치가 새로운 위치에 표시됩니다. 이 과정을 잊으면 스위치를 누를 때마다 원래 위치로 되돌아갑니다.

챌린지

쉬움

스위치가 작동하도록 만드세요: setState를 사용해 새 값을 _dark에 저장하세요.
다크 모드가 켜져 있을 때는 Scaffold의 backgroundColor를 Colors.black으로, 꺼져 있을 때는 Colors.white로 설정하세요. 레이블 색상은 이미 변경됩니다.

직접 해보기

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,
      home: const HomePage(),
    );
  }
}

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  bool _dark = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(title: const Text('Settings')),
      body: Center(
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(
              'Dark mode',
              style: TextStyle(fontSize: 20, color: _dark ? Colors.white : Colors.black),
            ),
            const SizedBox(width: 12),
            Switch(
              value: _dark,
              onChanged: (bool value) {},
            ),
          ],
        ),
      ),
    );
  }
}