شرح استخدام MaterialApp في فلاتر

Flutter هي إطار عمل مفتوح المصدر لتطوير التطبيقات المحمولة والويب، ويعتبر Material Design هو تصميم واجهة المستخدم الرسمي لنظام التشغيل Android. ويوفر Flutter مكتبة Material Design التي تمكن المطورين من الاستفادة من جميع مكونات التصميم المتاحة في نظام التشغيل Android وإضافة تلك المكونات إلى تطبيقاتهم.

واحدة من المكتبات الأساسية في Flutter هي MaterialApp، والتي توفر أساسًا لتطبيق Material Design. يمكن استخدام MaterialApp لإنشاء تطبيق متكامل يستخدم Material Design بأكمله.

ما هي MaterialApp في فلاتر؟

تم تصميم MaterialApp لتوفير العديد من المكونات المستخدمة في Material Design. وهي تسهل على المطورين إنشاء تطبيقات جميلة ومتسقة تمامًا مع تصميم نظام التشغيل Android.

“اقرأ أيضاً: شرح استخدام ويدجت Row في فلاتر“

خصائص MaterialApp

title

تستخدم هذه الخاصية لتحديد عنوان التطبيق، وتُعرض في الشريط العلوي للتطبيق.

MaterialApp(
  title: 'My App',
);

home

تستخدم هذه الخاصية لتحديد الشاشة الرئيسية للتطبيق.

MaterialApp(
  home: MyHomePage(),
);

“اقرأ أيضاً: شرح استخدام ويدجت PageView في فلاتر“

color

تستخدم هذه الخاصية لتحديد لون تطبيقك، والذي يُظهر في الشريط العلوي والعناصر الأخرى في التطبيق.

MaterialApp(
  color: Colors.blue,
);

theme

تستخدم هذه الخاصية لتحديد السمة التي يجب استخدامها في التطبيق.

MaterialApp(
  theme: ThemeData.dark(),
);

routes

تستخدم هذه الخاصية لتحديد الطرق المختلفة في التطبيق، والتي يمكن الانتقال إليها باستخدام الملاحة.

MaterialApp(
  routes: {
    '/home': (context) => MyHomePage(),
    '/settings': (context) => SettingsPage(),
  },
);

initialRoute

تستخدم هذه الخاصية لتحديد الطريق الافتراضي الذي يتم فتحه عند بدء تشغيل التطبيق.

MaterialApp(
  initialRoute: '/home',
);

onGenerateRoute

تستخدم هذه الخاصية لتحديد وظيفة لإنشاء الطرق الخاصة بالتطبيق.

MaterialApp(
  onGenerateRoute: (settings) {
    if (settings.name == '/details') {
      return MaterialPageRoute(
        builder: (context) => DetailsPage(),
      );
    }
  },
);

locale

تستخدم هذه الخاصية لتحديد اللغة الافتراضية التي يجب استخدامها في التطبيق.

MaterialApp(
  locale: const Locale('en', 'US'),
);

localizationsDelegates

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

MaterialApp(
  localizationsDelegates: [
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
  ],
);

supportedLocales

تستخدم هذه الخاصية لتحديد اللغات المدعومة في التطبيق.

MaterialApp(
  supportedLocales: [
    const Locale('en', 'US'),
    const Locale('es', 'ES'),
    const Locale('fr', 'FR'),
  ],
);

debugShowCheckedModeBanner

تستخدم هذه الخاصية لتحديد ما إذا كنت تريد عرض شعار Debug في الزاوية العلوية اليسرى من التطبيق.

MaterialApp(
  debugShowCheckedModeBanner: false,
);

“اقرأ أيضاً: شرح استخدام ويدجت BottomSheet في فلاتر“

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