ערכת נושא לאפליקציה מתוך צבע בסיס

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

הצבעים של כל כפתור, מתג ומחוון באפליקציה שלך מגיעים ממקום אחד: הערכת נושא של האפליקציה. שינוי ערכת הנושא משנה את האפליקציה כולה, בלי לגעת אפילו בכפתור אחד.

מגדירים אותה ב־MaterialApp. הדרך המהירה ביותר ליצור אחת מתחילה בצבע בסיס יחיד:

MaterialApp(
  theme: ThemeData(
    colorScheme: ColorScheme.fromSeed(seedColor: Colors.orange),
  ),
  home: ...,
)

ColorScheme.fromSeed בונה מתוך צבע הבסיס מערך שלם של צבעים תואמים: primary בולט לכפתורים ולקישורים, primaryContainer רך לאזורים מלאים, surface לרקע, ואת צבעי הטקסט שמופיעים על כל אחד מהם. אלה גוונים של צבע הבסיס, ולכן הכתום בכפתור אינו בדיוק Colors.orange, אבל הוא בהחלט כתום וקל לקריאה.

הסגול שראית עד עכשיו הוא צבע הבסיס שמוגדר כברירת מחדל ב־Flutter.

אתגר

קל

תן ל-Garden Journal ערכת נושא ירוקה: הגדר את theme: של MaterialApp ל-ThemeData שסכמת הצבעים שלו נוצרת מזרע Colors.green. שני הכפתורים יהפכו לירוקים בלי לשנות אותם.

נסו בעצמכם

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,
      home: Scaffold(
        appBar: AppBar(title: const Text('Garden Journal')),
        body: Center(
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              TextButton(
                onPressed: () {},
                child: const Text('Cancel'),
              ),
              const SizedBox(width: 16),
              ElevatedButton(
                onPressed: () {},
                child: const Text('Save'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}