Nyalakan dan Matikan dengan Sakelar

Termasuk bagian Membuat Aplikasi Interaktif dalam perjalanan Flutter di Coddy. Pelajaran 27 dari 34.

Switch adalah tombol sakelar hidup dan mati yang kamu kenal dari pengaturan ponsel. Tombol ini menampilkan nilai bool dan memberi tahu kamu saat seseorang mengubah posisinya:

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

value: menentukan tampilannya: hidup untuk true, mati untuk false. onChanged mendapatkan nilai baru saat tombol diketuk.

Sakelar tidak bergerak dengan sendirinya. Ketukan hanya memanggil onChanged; kamu menyimpan nilai baru dengan setState, layar dibangun ulang, lalu sakelar ditampilkan di posisi barunya. Jika kamu lupa melakukan itu, sakelar akan kembali ke posisi semula setiap kali kamu mengetuknya.

Tantangan

Mudah

Buat switch berfungsi: simpan nilai baru di _dark dengan setState.
Atur backgroundColor pada Scaffold ke Colors.black saat mode gelap aktif, dan ke Colors.white saat mode gelap tidak aktif. Warna label sudah berubah.

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