Sakelar Mode Gelap

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

Beberapa orang ingin mode gelap di satu aplikasi, tetapi tidak di aplikasi lainnya. Beri mereka tombol pengalih.

themeMode: adalah pengaturan seperti pengaturan lainnya, jadi nilainya bisa berasal dari state. Simpan bool di dalam State milik MyApp, widget yang membangun MaterialApp, lalu pilih mode berdasarkan nilai tersebut:

bool _dark = false;

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

Saat tombol pengalih mengubah _dark di dalam setState, build dijalankan lagi, MaterialApp mendapatkan mode baru, dan semua layar langsung berganti tema dengan transisi memudar singkat.

State harus berada di atas MaterialApp, karena tema dipilih di sana. Itulah sebabnya MyApp adalah StatefulWidget di sini.

Tantangan

Mudah

Buat switch mengubah tema:

di onChanged, simpan nilai baru di _dark di dalam setState
atur MaterialApp's themeMode: berdasarkan _dark: dark saat nilainya true, light saat nilainya false

Coba sendiri

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