מתג למצב כהה

חלק מהיחידה פריסות שמתאימות למסך במסלול ה-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) {},
              ),
            ],
          ),
        ),
      ),
    );
  }
}