الفصل الرابع: أنظمة التصميم في Flutter – مقدمة في Material Components

1. ما هو نظام التصميم (Design System)؟

نظام التصميم هو مجموعة من القواعد والمعايير التي تحدد كيف يجب أن تبدو الواجهة وكيف تتفاعل مع المستخدم.

• يحدد الألوان، الأيقونات، الأزرار، التباعد، وحتى الأنيميشن.
• الهدف هو جعل التطبيقات متناسقة وسهلة الاستخدام بغض النظر عن حجمها.

في Flutter، لدينا خياران أساسيان:

• Material Design: النظام الذي طورته Google.
• Cupertino: النظام المستوحى من iOS (تصميم Apple).

وسنبدأ الآن مع Material Design Components لأنها الأكثر استخدامًا، خاصة لتطبيقات Android.

2. ما هو Material Design؟

Material Design هو لغة تصميم من Google، مبنية على فكرة “المواد (Material)” التي تتفاعل مع الضوء والحركة بطريقة طبيعية.
Flutter يقدّم مكتبة ضخمة من Material Components Widgets الجاهزة، مثل:

• الأزرار (Buttons)
• الحقول النصية (TextFields)
• القوائم (Lists)
• البطاقات (Cards)
• الأشرطة (AppBars, BottomNavigationBars)

3. البداية مع MaterialApp

كل تطبيق يعتمد على Material Design يجب أن يلتف داخل:

MaterialApp(
  title: 'تطبيقي الأول',
  theme: ThemeData(
    primarySwatch: Colors.blue,
  ),
  home: HomePage(),
);

• MaterialApp: يوفر دعمًا كاملاً لمكونات Material.
• ThemeData: تحدد ألوان وخطوط التطبيق.
• home: الشاشة الرئيسية للتطبيق.

4. أمثلة على مكونات Material الأساسية

🔹 زر (Button)

ElevatedButton(
  onPressed: () {
    print("تم الضغط!");
  },
  child: Text("اضغط هنا"),
)

• ElevatedButton: زر مرتفع مع ظل.
• يوجد أنواع أخرى مثل TextButton وOutlinedButton.

🔹 حقل نصي (TextField)

TextField(
  decoration: InputDecoration(
    labelText: 'اكتب اسمك',
    border: OutlineInputBorder(),
  ),
)

• InputDecoration يعطي الحقل عنوانًا وحدودًا.
• يمكن استخدامه لتلقي إدخال من المستخدم.

🔹 بطاقة (Card)

Card(
  child: Padding(
    padding: const EdgeInsets.all(16.0),
    child: Text("أنا بطاقة Material!"),
  ),
)

• Card تضيف خلفية مرتفعة بزوايا مستديرة.
• تُستخدم لعرض محتوى منظم.

🔹 شريط علوي (AppBar)

Scaffold(
  appBar: AppBar(
    title: Text("شاشة البداية"),
  ),
  body: Center(child: Text("مرحبًا بكم")),
)

• AppBar يُستخدم كعنوان علوي للشاشة.
• يُمكن إضافة أيقونات أو أزرار بداخله.

5. لماذا نستخدم Material Components؟

• تجعل تطبيقك متناسقًا مع تطبيقات Android الأخرى.
• توفر تجربة استخدام مألوفة للمستخدمين.
• تختصر الوقت بدل بناء كل عنصر من الصفر.
• مدعومة بشكل كامل من Flutter مع تحديثات مستمرة.

✅ ملخص الفصل

• Design System = مجموعة معايير لتوحيد تجربة الاستخدام.
• Flutter يدعم نظامين أساسيين: Material Design (Google) و Cupertino (Apple).
• MaterialApp هو المدخل الأساسي لمكونات Material.
• تعلمنا مكونات رئيسية: ElevatedButton, TextField, Card, AppBar.