تخيل أنك مطوّر تطبيقات عندك صندوق أدوات قديم (Material 2) مليان عناصر جاهزة: أزرار، مربعات إدخال، قوائم… إلخ. هذا الصندوق ممتاز، لكنه صار تقليدي بعض الشيء، شكله موحّد وما في مساحة كبيرة للتخصيص.
هنا جوجل قدّمت لك Material 3: صندوق أدوات أحدث، أنيق، وأكتر مرونة.
الفرق مش بس في الألوان والأشكال، بل في الفلسفة الكاملة للتصميم.
- Material 2 كان مبني على مبدأ التوحيد: كل التطبيقات شبه بعضها.
- Material 3 يعطيك شخصية وهوية: تطبيقك يعكس براندك، ألوانك، وشخصيتك.
الفروقات الرئيسية بين Material 2 و Material 3
- التخصيص والهوية (Personalization)
- في Material 2 كنت محكوم بلوحة ألوان ثابتة تقريبًا.
- في Material 3 صار عندك Dynamic Color: التطبيق يقدر يولّد لوحة ألوان متكاملة بناءً على صورة أو ثيم النظام.
→ مثال: تطبيقك يغيّر ألوانه ليتماشى مع خلفية الهاتف.
- الأزرار (Buttons)
- Material 2: FlatButton, RaisedButton, OutlineButton.
- Material 3: كله اتوحّد في TextButton, ElevatedButton, OutlinedButton, FilledButton (مع تنسيقات أوضح).
→ الآن زر “Filled” صار يرمز للإجراء الأساسي.
- المكوّنات الجديدة (New components)
- Navigation Bar (بديل عن BottomNavigationBar).
- Navigation Drawer بتصميم حديث.
- FAB جديد بأشكال متعددة (small, regular, large, extended).
- Cards صار لها أنماط متعددة بدل الشكل الموحد القديم.
- Typography (الخطوط)
- Material 2: مجموعة ثابتة من text styles (headline1, headline2…).
- Material 3: نظام أبسط وأكثر مرونة (Display, Headline, Title, Body, Label).
→ أسهل في التذكر والاستخدام.
- الزوايا والظلال (Shape & Elevation)
- Material 2: كثير اعتماد على الظلال.
- Material 3: أكثر اعتماد على الألوان والتباين، مع زوايا مستديرة أكثر.
لماذا الترقية إلى Material 3؟
- مستقبل Flutter والجوجل كله يتجه لـ Material 3، والدعم القادم هيركز عليها.
- سهولة تخصيص الثيم: بدل ما تكتب مئات الأسطر لضبط الألوان، صار كل شيء أوتوماتيكي.
- تحديث بصري يجعل تطبيقك حديث ومتوافق مع Android 12+ و iOS.
- استمرار التوافق: Flutter يحاول يخلي M2 وM3 يشتغلوا مع بعض (بس الأفضل تعتمد الجديد).
متى لا يُفضل الترقية الآن؟
- إذا كان تطبيقك قديم جدًا ومبني على مكتبات أو Widgets غير متوافقة مع M3.
- إذا كان عندك تصميم مخصص تمامًا (Custom Design) مش محتاج لمكتبة Material أصلاً.
- إذا كان العميل يريد التطبيق يظل ثابت شكليًا (بمعنى: لا يريد أن “يتغير مظهره” فجأة).
- لو عندك ضغط وقتي لتسليم المشروع: بعض التغييرات في الـ buttons أو الـ typography ممكن تسبب مشاكل تحتاج تعديل يدوي.
كيف تهاجر من Material 2 إلى Material 3؟
- فعّل M3 في الثيم:
return MaterialApp(
theme: ThemeData(
useMaterial3: true,
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
),
home: MyHomePage(),
);
- جرّب تشغيل التطبيق: هتشوف مباشرة تغييرات في الأزرار، الألوان، التايبوجرافي.
- راجع كل Widget: بعض المكونات اختلفت (زي الـ NavigationBar).
- لو حصل كسر (Breaking Change):
- راجع دليل الهجرة الرسمي.
- عدّل الكود بما يتوافق مع الـ Widgets الجديدة.
الخلاصة
- Material 3 هو الجيل الجديد من لغة التصميم الخاصة بجوجل، وبيعطيك مرونة وأناقة أكبر.
- الأفضل تبدأ بالاعتماد عليه في أي مشروع جديد.
- المشاريع القديمة ممكن تهاجر تدريجيًا، لكن لو تطبيقك ضخم ومستقر، خليك حذر قبل الترقية.