الفصل الخامس: أنظمة التصميم (Design Systems) و Material Component Widgets

ما معنى “نظام تصميم”؟

تخيل معايا إنك تبني مدينة جديدة. عندك شوارع، بيوت، إشارات مرور، حدائق…
لو كل مهندس يشتغل بطريقة عشوائية، هتكون النتيجة مدينة فوضوية، شكلها غير متناسق وصعب العيش فيها.
هنا يجي دور نظام التصميم: هو مجموعة من القواعد والمكونات الجاهزة اللي تضمن إن كل شيء يطلع منظم، متناسق، ومفهوم.

بنفس الفكرة، نظام التصميم في تطوير التطبيقات يحدد:

• كيف يكون شكل الأزرار؟
• أي ألوان مسموح بها؟
• كيف يُكتب النص (Typography)؟
• ما هي أشكال البطاقات، الحواف، القوائم، الرموز؟

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

Material Design: النظام الرسمي لجوجل

جوجل قدمت Material Design كنظام التصميم الخاص بها، وهو اللي Flutter مبني عليه.
الفكرة إنك ما تحتاج تعيد اختراع العجلة:

• عندك Widgets جاهزة (Buttons, Cards, AppBar, Drawer…).
• عندك خطوط وألوان محددة.
• عندك قواعد لحركة العناصر (Animations) وانتقالات الشاشة.

لماذا سُمي “Material”؟

الفلسفة مبنية على تخيل إن عناصر الشاشة عبارة عن أوراق (Paper) مادية تتحرك وتتداخل مع بعضها. كل عنصر له ارتفاع (Elevation) وظل (Shadow) زي الأجسام الحقيقية.

Material Component Widgets

الـ Material Widgets هي اللبنات الجاهزة اللي بتبني منها واجهة تطبيقك.
بدل ما تصمم زر من الصفر، Flutter يعطيك زر Material جاهز ومتوافق مع نظام التصميم.

أهم الفئات:

1. App Structure and Navigation
   • AppBar
   • NavigationBar
   • Drawer
   • TabBar
2. Buttons
   • ElevatedButton
   • FilledButton
   • OutlinedButton
   • IconButton
3. Input & Forms
   • TextField
   • Checkbox
   • Switch
   • Radio
4. Display Components
   • Card
   • ListTile
   • Dialog
   • SnackBar
5. Layout
   • GridView
   • ListView
   • ExpansionPanel

مثال عملي: الفرق بين زر عادي وزر Material

// زر عادي باستخدام ElevatedButton
ElevatedButton(
  onPressed: () {},
  child: Text('اضغط هنا'),
)

// النتيجة: زر متناسق مع نظام التصميم (ألوان، ظل، خط)

لو حاولت تصمم زر بنفسك باستخدام Container و InkWell، هتاخد وقت أطول وممكن يطلع غير متناسق.
بينما استخدام Material Widgets يضمن الشكل والسلوك الصحيح على كل الأجهزة.

العلاقة بين Material 2 و Material 3

• Material 2 كان النسخة السابقة اللي اعتمدت عليها معظم التطبيقات.
• Material 3 هو الجيل الجديد (شرحتُه لك قبل قليل) اللي يركز على التخصيص والمرونة.
• معظم Widgets اللي هنتعلمها هنا لها إصدار محدث في Material 3.

الخلاصة

• Design System = قواعد ومكونات تضمن تناسق وجمال تطبيقك.
• Material Design = نظام التصميم الرسمي من جوجل.
• Material Widgets = العناصر الجاهزة اللي تستخدمها مباشرة في Flutter.