Karanlık Mod Anahtarı

Coddy'nin Flutter Journey'sinin Her Ekrana Uyan Düzenler bölümünün bir parçası. Ders 25 / 30.

Bazı kişiler bir uygulamada koyu modu ister, diğerlerinde istemez. Onlara bir anahtar sunun.

themeMode: diğer ayarlar gibi bir ayardır, bu yüzden duruma bağlı olabilir. MaterialApp öğesini oluşturan bileşen olan MyApp'in State durumunda bir bool tutun ve modu bu değere göre seçin:

bool _dark = false;

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

Anahtar setState içinde _dark değerini değiştirdiğinde build yeniden çalışır, MaterialApp yeni modu alır ve kısa bir geçiş efektiyle tüm ekranların teması aynı anda değişir.

Durumun MaterialApp'in üzerinde tutulması gerekir, çünkü tema orada seçilir. Bu nedenle burada MyApp bir StatefulWidget'tır.

Görev

Kolay

Anahtarın temayı değiştirmesini sağla:

onChanged içinde, yeni değeri setState içinde _dark değişkenine ata
MaterialApp içindeki themeMode: değerini _dark değişkeninden belirle: true olduğunda koyu, false olduğunda açık

Kendin dene

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