צבעי Theme.of(context)

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

הכפתורים מאמצים את ערכת הנושא בעצמם. התיבות שלך לא: Container עם Colors.teal.shade100 נשאר בצבע הזה, בלי קשר לערכת הנושא.

כדי לצבוע את הווידג'טים שלך לפי ערכת הנושא, קרא אותה באמצעות Theme.of(context):

final colors = Theme.of(context).colorScheme;

Container(
  color: colors.primaryContainer,
  child: Text('Hi', style: TextStyle(color: colors.onPrimaryContainer)),
)

ערכת הצבעים מגיעה בזוגות. primaryContainer הוא מילוי רך, ו-onPrimaryContainer הוא צבע הטקסט על המילוי הזה, שנבחר כדי שיהיה קל לקרוא אותו. אותו הדבר נכון גם לגבי primary ו-onPrimary, surface ו-onSurface.

Theme.of(context) מוצא את ערכת הנושא שמעל הווידג'ט שפונה אליו. ערכת הנושא מוגדרת על ידי MaterialApp, לכן ה-context חייב להיות באחד הווידג'טים שמתחתיו, למשל ב-build של HomeScreen. ב-build של MyApp עצמו, שנמצא מעל MaterialApp, הוא מוצא רק את הצבע הסגול שמוגדר כברירת מחדל ב-Flutter.

אתגר

קל

צבעו את הבאנר לפי ערכת הנושא, כך שהוא יתאים לכל ערך seed שתבחרו:

בתחילת build של HomeScreen: final colors = Theme.of(context).colorScheme;
צבע הבאנר: colors.primaryContainer
צבע הטקסט שלו: colors.onPrimaryContainer

נסו בעצמכם

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.teal),
      ),
      home: const HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Bookshelf')),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            Container(
              width: double.infinity,
              padding: const EdgeInsets.all(24),
              decoration: BoxDecoration(
                color: Colors.teal.shade100,
                borderRadius: BorderRadius.circular(16),
              ),
              child: Text(
                'You read 12 books this year',
                style: TextStyle(fontSize: 20, color: Colors.teal.shade900),
              ),
            ),
          ],
        ),
      ),
    );
  }
}