Costom Colors

  • اللون الأساسي (Primary)
  • اللون الثانوي (Secondary)
  • لون الخلفية (Background)
  • لون النصوص (Text)
🧩 الخطوة 1: داخل MaterialApp في ملف main.dart

مثال بسيط جدًا 👇

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(
      title: 'Custom Colors Demo',

      // هنا نضع الألوان داخل الـ ThemeData
      theme: ThemeData(
        // اللون الأساسي للتطبيق
        primaryColor: const Color(0xFF1565C0), // أزرق جميل

        // اللون الذي يُستخدم في الأزرار والعناصر الثانوية
        colorScheme: ColorScheme.fromSeed(
          seedColor: const Color(0xFF1565C0), // نفس اللون أو غيره
          primary: const Color(0xFF1565C0),
          secondary: const Color(0xFFFFA000), // أصفر غامق
          background: const Color(0xFFF5F5F5), // رمادي فاتح للخلفية
          onPrimary: Colors.white, // لون النص فوق اللون الأساسي
        ),

        scaffoldBackgroundColor: const Color(0xFFF5F5F5), // خلفية عامة
        appBarTheme: const AppBarTheme(
          backgroundColor: Color(0xFF1565C0), // نفس اللون الأساسي
          foregroundColor: Colors.white, // لون النص في الـ AppBar
        ),
      ),

      home: const HomeScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('ألوان التطبيق')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            // يستخدم اللون الأساسي من الثيم
            ElevatedButton(
              onPressed: () {},
              child: const Text('زر باللون الأساسي'),
            ),

            const SizedBox(height: 20),

            // يستخدم اللون الثانوي من ColorScheme
            Container(
              width: 150,
              height: 150,
              color: Theme.of(context).colorScheme.secondary,
              child: const Center(
                child: Text(
                  'لون ثانوي',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
Dart
📘 النتيجة:
  • كل الأزرار (مثل ElevatedButton) ستأخذ اللون الأساسي تلقائيًا.
  • يمكنك الوصول لأي لون من الثيم مثلًا: Theme.of(context).colorScheme.primary // اللون الأساسي Theme.of(context).colorScheme.secondary // اللون الثانوي Theme.of(context).colorScheme.background // خلفية التطبيق Theme.of(context).colorScheme.onPrimary // لون النص فوق اللون الأساسي
✨ ملاحظات سريعة:
  • لو أردت الوضع الداكن لاحقًا، أضف: darkTheme: ThemeData.dark(), themeMode: ThemeMode.light, // أو ThemeMode.system
  • يمكنك تغيير اللون الرئيسي بسهولة بتغيير seedColor أو primary.
🧩 أولاً: ما هو ThemeData و ColorScheme؟

في Flutter، ThemeData هو الكائن الذي يحمل كل إعدادات المظهر (ألوان، خطوط، أيقونات…).
أما ColorScheme فهو جزء منه يضم الألوان الأساسية التي يستعملها Flutter عبر كل عناصر الواجهة (AppBar, Buttons, Backgrounds… إلخ).

🎨 الآن نبدأ بشرح كل سطر عندك:

✅ 1️⃣

primaryColor: const Color(0xFF1565C0),
Dart

📌 هذا هو اللون الأساسي الرئيسي للتطبيق (Primary Color).
يُستخدم مثلاً في:

  • AppBar (إذا لم تحدد لونًا آخر)
  • FloatingActionButton
  • أزرار ElevatedButton (في بعض الحالات القديمة)
  • عناصر كثيرة تعتمد اللون الرئيسي

🟦 مثال:
لو كتبت:

AppBar(<br>  title: const Text('Hello'),<br>  backgroundColor: Theme.of(context).primaryColor,<br>)
Dart

سيظهر باللون الأزرق #1565C0.

✅ 2️⃣

colorScheme: ColorScheme.fromSeed(
  seedColor: const Color(0xFF1565C0),
  primary: const Color(0xFF1565C0),
  secondary: const Color(0xFFFFA000),
  background: const Color(0xFFF5F5F5),
  onPrimary: Colors.white,
),
Dart

ColorScheme هو “مخطط الألوان” (Color Palette) الذي Flutter يستخدمه لتلوين واجهاتك بشكل ذكي ومتناسق.

💡 شرح مفصل لكل خاصية:

🎯 seedColor

هذا اللون الأساسي الذي يعتمد عليه Flutter لتوليد باقي الألوان تلقائيًا (في Material 3).

🔹 مثلاً:
إذا وضعت seedColor = Color(0xFF1565C0)
فـ Flutter سيقوم بإنشاء تدرجات منه (فاتحة/غامقة) تلقائيًا.

🎨 primary

اللون الأساسي الرئيسي للتطبيق (نفس فكرة primaryColor تقريبًا).
غالبًا نفس لون العلامة التجارية أو اللون الرئيسي في التصميم.

يُستخدم في:

  • أزرار رئيسية
  • AppBar
  • أحيانًا رموز أو عناصر مميزة

🟦 مثال:

Container(color: Theme.of(context).colorScheme.primary)
Dart

💛 secondary

اللون الثانوي الذي يُستخدم لإبراز العناصر الأخرى.
عادةً لون مكمّل للّون الأساسي.

🟨 مثال:

  • أزرار ثانوية
  • أيقونات إضافية
  • خطوط تحت النصوص أو حدود
Container(color: Theme.of(context).colorScheme.secondary)
Dart

⚪ background

اللون الخلفي العام للواجهات.

يُستخدم في:

  • الخلفية الافتراضية للشاشات (Scaffold)
  • الخلفيات داخل بطاقات (Card)
  • القوائم

مثلاً:

Scaffold(<br>  backgroundColor: Theme.of(context).colorScheme.background,<br>)
Dart

⚫ onPrimary

اللون الذي يُستخدم فوق اللون الأساسي (أي لون النص أو الأيقونة فوق الخلفية الأساسية).

يعني لو الزر أزرق (primary)،
النص بداخله يجب أن يكون لونًا مناسبًا (غالبًا أبيض).

🔸 مثال:

Text(<br>  'Hello',<br>  style: TextStyle(color: Theme.of(context).colorScheme.onPrimary),<br>)
Dart
💥 الآن سؤال: “هل يمكن إضافة ألوان أخرى؟”

الإجابة: ✅ نعم، طبعًا!

لديك طريقتان:

🧱 الطريقة 1 — عبر ColorScheme نفسه

يمكنك تحديد كل القيم الإضافية التي يدعمها:

colorScheme: ColorScheme(
  brightness: Brightness.light,
  primary: Color(0xFF1565C0),
  onPrimary: Colors.white,
  secondary: Color(0xFFFFA000),
  onSecondary: Colors.black,
  background: Color(0xFFF5F5F5),
  onBackground: Colors.black,
  surface: Colors.white,
  onSurface: Colors.black,
  error: Colors.red,
  onError: Colors.white,
),
Dart

🧠 هذا هو الشكل الكامل لـ ColorScheme (Material 3).
كل لون له نظيره onColor (لون النص/الأيقونات فوقه).

🧱 الطريقة 2 — إضافة ألوان مخصصة بنفسك

يمكنك تخزينها في مكان خاص (بدون أن تكون داخل ColorScheme):

class AppColors {
  static const Color success = Color(0xFF4CAF50);
  static const Color warning = Color(0xFFFF9800);
  static const Color danger = Color(0xFFF44336);
}
Dart

واستخدامها هكذا:

Container(color: AppColors.success);
Dart
🌗 ملاحظة مهمة — اللون في الوضع الليلي (Dark Mode)

لو أضفت:

darkTheme: ThemeData(
  brightness: Brightness.dark,
  colorScheme: ColorScheme.fromSeed(
    seedColor: Color(0xFF1565C0),
    brightness: Brightness.dark,
  ),
),
themeMode: ThemeMode.system, // يتبع النظام تلقائيًا
Dart

سيقوم Flutter بتعديل كل الألوان لتتناسب تلقائيًا مع الوضع الداكن.

🎁 خلاصة سريعة
الخاصيةالمعنىمكان الاستخدام
primaryColorاللون الأساسي العامAppBar، أزرار، رموز
seedColorاللون الذي يولد منه باقي الألوان تلقائيًا–
primaryاللون الرئيسي المستخدم في التصميمText, Buttons
secondaryاللون المساعد/المكملعناصر إضافية
backgroundالخلفية العامةScaffold, Cards
onPrimaryلون النص فوق اللون الأساسينص داخل زر أو AppBar
onSecondary, onBackground…لون النص فوق كل خلفية مقابلةوضوح النصوص