MaterialApp: ما هو وكيفية إعداد widget الجذر

ما هو MaterialApp في Flutter؟

MaterialApp هو widget غلاف يقوم بتهيئة Material Design في تطبيق Flutter. وهو جذر Widget Tree ويوفر للـ widgets التابعة إمكانية الوصول إلى خدمات النظام: التنقل، والسمة، واستعلامات الوسائط، والتوطين. بدون MaterialApp، لن يكون للتطبيق نمط Material القياسي ولن يتمكن من استخدام widgets مثل Scaffold وAppBar وFloatingActionButton وBottomNavigationBar.

ماذا يضيف MaterialApp إلى Widget Tree

عند استخدام MaterialApp، يضيف Flutter تلقائياً عدة widgets رئيسية إلى جذر الشجرة: Navigator (كومة شاشات للتنقل)، Theme (نظام الألوان والأنماط)، MediaQuery (معلومات الجهاز)، Localizations (سلاسل مترجمة)، Directionality (اتجاه النص). هذه الـ widgets مطبقة كـ InheritedWidgets ويمكن الوصول إليها عبر BuildContext في أي مكان في التطبيق.

الاستخدام الأساسي

التكوين الأدنى لـ MaterialApp يتطلب فقط المعلمة home — الـ widget الذي يظهر على الشاشة الرئيسية. يقوم Flutter تلقائياً بتغليف home في Scaffold إذا لم يكن Scaffold بالفعل، عبر آلية WidgetsBinding. عند تشغيل التطبيق باستخدام runApp(MaterialApp(home: MyHomePage()))، ينشئ Flutter Widget Tree جذراً مع MaterialApp كجذر.

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "My Application",
      theme: ThemeData(
        primarySwatch: Colors.blue,
        fontFamily: "Roboto",
      ),
      darkTheme: ThemeData(
        brightness: Brightness.dark,
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

في هذا المثال، يقوم MaterialApp بتهيئة السمة الأساسية (فاتحة وداكنة)، والعنوان، والشاشة الرئيسية. تُستخدم المعلمة title لعنوان النافذة (على سطح المكتب) ولإمكانية الوصول. تحدد المعلمتان theme وdarkTheme مظهر التطبيق في الأوضاع المختلفة.

هيكل ومعلمات MaterialApp

MaterialApp يقبل أكثر من 30 معلمة، والتي تنقسم إلى فئات: إعدادات Material Design، والتوجيه، والسمات، والتوطين، وسلوك الأخطاء، والإعدادات الخاصة بالمنصة. معرفة المعلمات الرئيسية تسمح بتكوين التطبيق بمرونة دون كتابة كود إضافي.

معلمات التكوين الرئيسية

المعلمة title تحدد اسم التطبيق لعنوان النافذة وإمكانية الوصول. color تحدد لون التطبيق لمبدل المهام على Android. debugShowCheckedModeBanner تخفي بانر وضع التصحيح في إصدارات الإطلاق. showPerformanceOverlay تفعّل تراكباً بمعلومات الأداء. supportDarkTheme تشير إلى ما إذا كان التطبيق يدعم السمة الداكنة.

معلمات خاصة بالمنصة

MaterialApp يوفر معلمات لتكوين السلوك على منصات مختلفة: restorationScopeId للحفاظ على حالة التطبيق عند إعادة التشغيل على Android، scrollBehavior لتكوين سلوك التمرير على أنظمة تشغيل مختلفة، useMaterial3 لتفعيل Material 3 (Material You). يضيف Material 3 ألواناً ديناميكية، ومكونات جديدة، وأنماطاً محدثة.

السمات باستخدام theme وdarkTheme

السمات هي إحدى المعلمات الرئيسية لـ MaterialApp. المعلمة theme تقبل كائن ThemeData الذي يحدد لوحة الألوان، والطباعة، وأشكال المكونات، والأيقونات للسمة الفاتحة. المعلمة darkTheme هي التكوين المكافئ للسمة الداكنة. يقوم Flutter تلقائياً بتبديل السمة وفقاً لإعدادات نظام الجهاز.

ThemeData: نظام الألوان

ThemeData يتضمن primarySwatch (اللون الأساسي)، colorScheme (نظام ألوان ممتد لـ Material 3)، brightness (فاتح أو داكن)، fontFamily (الخط الافتراضي)، textTheme (أنماط النص)، cardTheme، appBarTheme، buttonTheme وعشرات المعلمات الأخرى لتخصيص مكونات محددة. استخدم colorScheme لـ Material 3 وprimarySwatch لـ Material 2.

الألوان الديناميكية لـ Material 3

Material 3 (Material You) يدعم الألوان الديناميكية، والتي تُستخرج من خلفية الجهاز على Android 12+. لتفعيلها، اضبط useMaterial3: true واستخدم colorScheme.fromSeed أو colorScheme.fromImageProvider. الألوان الديناميكية تولد تلقائياً لوحة متناغمة من 5 درجات: primary، secondary، tertiary، neutral وneutralVariant.

الوصول إلى السمة في الـ widgets

أي widget يمكنه الوصول إلى السمة الحالية عبر Theme.of(context). يُعيد Theme.of كائن ThemeData يمكن من خلاله الحصول على الألوان و textTheme ومعلمات أخرى. للاشتراك في تغييرات السمة (على سبيل المثال، عند التبديل بين الوضع الفاتح والداكن)، استخدم السياق داخل طريقة build — سيقوم Flutter تلقائياً بإعادة بناء الـ widget عند تغيير السمة.

Container(
  color: Theme.of(context).colorScheme.primary,
  child: Text(
    "Themed text example",
    style: Theme.of(context).textTheme.headlineMedium,
  ),
)

في هذا المثال، يحصل Theme.of(context) على السمة الحالية من أقرب MaterialApp. يطابق لون الخلفية ونمط النص تلقائياً السمة الحالية (فاتحة أو داكنة). عند تبديل السمة، سيتم إعادة بناء Container وText بقيم جديدة من ThemeData المحدّث.

التوجيه والتنقل في MaterialApp

MaterialApp يدمج Navigator — متصفح قائم على الكومة يدير الانتقالات بين الشاشات. تحدد المعلمات initialRoute وroutes وonGenerateRoute كيفية معالجة Flutter للتنقل. يتيح Navigator.push وNavigator.pushReplacement تبديل الشاشات برمجياً، بينما يتيح Navigator.pop العودة للخلف.

المسارات المسماة (routes)

المعلمة routes تقبل Map<String, WidgetBuilder>، حيث المفتاح هو اسم المسار (سلسلة) والقيمة هي دالة تنشئ الـ widget لتلك الشاشة. المسارات المسماة مناسبة للتنقل الثابت: '/' (المسار الجذر) يتوافق عادة مع home، و'/settings' و'/profile' — شاشات أخرى. ينتقل Navigator.pushNamed(context, '/settings') إلى شاشة الإعدادات.

توليد المسارات (onGenerateRoute)

onGenerateRoute هي دالة تُستدعى عندما لا يتم العثور على مسار في routes. تقبل RouteSettings وتُعيد MaterialPageRoute. هذا النهج مفيد للتنقل الديناميكي عندما تعتمد المسارات على بيانات (مثلاً /user/42). يحلل onGenerateRoute اسم المسار، ويستخرج المعلمات، وينشئ الشاشة المناسبة.

الروابط العميقة والتوجيه المسمى

لدعم الروابط العميقة (deep links)، استخدم المعلمتين onGenerateInitialRoute وonGenerateRoute معاً. تسمح الروابط العميقة بفتح شاشة معينة من التطبيق عبر URL (مثلاً https://example.com/promo). يعالج Flutter الروابط العميقة على Android (عبر intent filters) وiOS (عبر universal links) ويمرر المسار إلى onGenerateRoute.

MaterialApp(
  initialRoute: "/",
  routes: {
    "/": (context) => const HomePage(),
    "/settings": (context) => const SettingsPage(),
  },
  onGenerateRoute: (settings) {
    if (settings.name?.startsWith("/user/") == true) {
      final userId = settings.name!.split("/").last;
      return MaterialPageRoute(
        builder: (_) => UserPage(userId: userId),
      );
    }
    return null;
  },
)

في هذا المثال، يعالج onGenerateRoute المسارات الديناميكية مثل /user/42. إذا لم يتم العثور على المسار في المسارات الثابتة ولم يتطابق مع النمط الديناميكي، يعرض Flutter صفحة خطأ يمكن تخصيصها عبر onUnknownRoute.

التوطين والعولمة

MaterialApp يوفر دعماً مدمجاً للتوطين عبر المعلمتين localizationsDelegates وsupportedLocales. تقوم LocalizationsDelegates بتحميل السلاسل المترجمة، ويحدد supportedLocales اللغات التي يدعمها التطبيق. يكتشف Flutter تلقائياً لغة الجهاز ويحمل الموارد المترجمة المقابلة.

إعداد supportedLocales وlocalizationsDelegates

المعلمة supportedLocales تقبل قائمة من Locales التي يدعمها التطبيق: [const Locale('en'), const Locale('ru'), const Locale('de')]. localizationsDelegates هي قائمة بالمفوضين الذين يقومون بتحميل السلاسل المترجمة. لـ Material Design، أضف GlobalMaterialLocalizations.delegate وGlobalWidgetsLocalizations.delegate وGlobalCupertinoLocalizations.delegate.

توطين سلاسل التطبيق

لتوطين السلاسل الخاصة بك، استخدم الفئة AppLocalizations، المنشأة عبر flutter_localizations أو حزمة intl. توفر AppLocalizations طرقاً ثابتة للوصول إلى السلاسل المترجمة: AppLocalizations.of(context)!.helloMessage. يقوم MaterialApp تلقائياً بتمرير Localizations إلى Widget Tree، مما يجعلها متاحة عبر السياق.

• flutter_localizations — الحزمة الرسمية لتوطين widgets Material والسلاسل النظامية.
• intl — حزمة العولمة: تنسيق الأرقام والتواريخ والعملات والجمع.
• ملفات ARB — تنسيق تخزين السلاسل المترجمة، المستخدم من قبل flutter_localizations وintl.

MaterialApp مقابل CupertinoApp مقابل WidgetsApp

يوفر Flutter ثلاثة widgets جذرية لمنصات مختلفة: MaterialApp (Material Design لنظام Android والويب)، CupertinoApp (نمط iOS)، وWidgetsApp (widget أساسي بدون تنسيق). يحدد اختيار الـ widget الجذر مظهر التطبيق بأكمله وتوفر المكونات الخاصة بالمنصة.

MaterialApp: الخيار العالمي

MaterialApp مناسب لمعظم التطبيقات بفضل دعم Material Design الذي يبدو رائعاً على Android والويب وسطح المكتب. يوفر Material Design مكتبة غنية من المكونات: Scaffold، AppBar، BottomNavigationBar، Drawer، SnackBar، Dialog وغيرها الكثير. يدعم MaterialApp أيضاً Material 3 مع الألوان الديناميكية.

CupertinoApp: نمط iOS

CupertinoApp يستخدم Cupertino Design، الذي يتبع إرشادات واجهة المستخدم البشرية من Apple. يوفر CupertinoPageScaffold وCupertinoNavigationBar وCupertinoTabBar ومكونات أخرى بنمط iOS. استخدم CupertinoApp لتطبيقات iOS أو التطبيقات التي تتبع نمط Apple على جميع المنصات.

WidgetsApp: جذر بسيط

WidgetsApp هو الـ widget الجذري الأساسي بدون تنسيق. يضيف Navigator وMediaQuery وLocalizations ولكنه لا يوفر سمات أو مكونات Material/Cupertino. WidgetsApp مناسب لأنظمة التصميم المخصصة، والألعاب، أو التطبيقات ذات التنسيق الخاص حيث يكون Material أو Cupertino زائداً عن الحاجة.