مفتاح تبديل الوضع الداكن

جزء من قسم تصميم يتكيف مع الشاشة في رحلة Flutter على Coddy. الدرس 25 من 30.

يريد بعض الأشخاص استخدام الوضع الداكن في تطبيق واحد دون التطبيقات الأخرى. امنحهم مفتاح تبديل.

themeMode: إعداد كسائر الإعدادات، لذا يمكن أن تأتي قيمته من الحالة. احتفظ بقيمة bool في State الخاصة بـ MyApp، وهي الواجهة التي تنشئ MaterialApp، واختر الوضع منها:

bool _dark = false;

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

عندما يغيّر مفتاح التبديل قيمة _dark داخل setState، تُنفَّذ build مجددًا، وتحصل MaterialApp على الوضع الجديد، فتتحول سمة كل شاشة دفعة واحدة مع تلاشي قصير.

يجب أن تكون الحالة أعلى MaterialApp، لأن اختيار السمة يتم هناك. ولهذا السبب فإن MyApp هي StatefulWidget هنا.

التحدي

سهل

اجعل المفتاح يبدّل السمة:

في onChanged، خزّن القيمة الجديدة في _dark داخل setState
اضبط themeMode: في MaterialApp استنادًا إلى _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) {},
              ),
            ],
          ),
        ),
      ),
    );
  }
}