ערכת נושא כהה

חלק מהיחידה פריסות שמתאימות למסך במסלול ה-Flutter של Coddy. שיעור 24 מתוך 30.

אנשים רבים משתמשים במצב כהה בטלפון שלהם, במיוחד בלילה. לאפליקציה יכולים להיות שני ערכות נושא: theme: עבור מצב בהיר ו-darkTheme: עבור מצב כהה.

ערכת צבעים כהה נוצרת מאותו צבע בסיס, עם הגדרה נוספת אחת:

MaterialApp(
  theme: ThemeData(
    colorScheme: ColorScheme.fromSeed(seedColor: Colors.red),
  ),
  darkTheme: ThemeData(
    colorScheme: ColorScheme.fromSeed(
      seedColor: Colors.red,
      brightness: Brightness.dark,
    ),
  ),
  themeMode: ThemeMode.dark,
  home: ...,
)

brightness: Brightness.dark הופכת את ערכת הצבעים: surface כהה עם טקסט בהיר של onSurface, וגוונים רכים יותר של צבע הבסיס שאינם מסנוורים.

themeMode: בוחרת באיזו ערכת נושא להשתמש. ThemeMode.system, ברירת המחדל, פועלת לפי ההגדרה בטלפון; ThemeMode.light ו-ThemeMode.dark בוחרות אחת מהן בלי קשר להגדרת הטלפון. כל ווידג'ט שקורא את ערכת הנושא משתנה בהתאם.

אתגר

קל

תן ל-Night Reader מראה כהה:

darkTheme: מתוך הזרע Colors.indigo עם brightness: Brightness.dark
themeMode: ThemeMode.dark, כך שהמראה שלו תמיד כהה

נסו בעצמכם

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,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.indigo),
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text('Night Reader')),
        body: const Center(
          child: Text('Good evening', style: TextStyle(fontSize: 28)),
        ),
      ),
    );
  }
}