شرح استخدام flutter_native_splash في Flutter

تعتبر شاشة البداية (Splash Screen) عنصرًا مهمًا في التطبيقات لأنها تمنح المستخدمين تجربة أولى مميزة عند فتح التطبيق. باستخدام حزمة flutter_native_splash، يمكنك تخصيص شاشة البداية بسهولة لتتناسب مع هوية تطبيقك. سنستعرض في هذه المقالة كيفية استخدام حزمة flutter_native_splash لعمل شاشة بداية مخصصة.

تثبيت حزمة flutter_native_splash

أول خطوة هي إضافة الحزمة إلى ملف pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter

dev_dependencies:
  flutter_native_splash: ^2.0.0

بعد ذلك، قم بتشغيل الأمر التالي لتثبيت الحزمة:

flutter pub get

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

إعداد حزمة flutter_native_splash

بعد تثبيت الحزمة، نحتاج إلى ضبط إعداداتها. يتم ذلك من خلال تعديل ملف pubspec.yaml بإضافة الإعدادات الخاصة بشاشة البداية تحت قسم flutter_native_splash:

flutter_native_splash:
  color: "#42a5f5"
  image: assets/splash.png
  android: true
  ios: true

شرح الإعدادات

• color: هذا الخيار يحدد لون خلفية شاشة البداية. يمكن استخدام أي لون باستخدام القيمة الست عشرية (Hex).
• image: مسار الصورة التي ستظهر في شاشة البداية. تأكد من وضع الصورة في مجلد assets وتحديث ملف pubspec.yaml ليشمل هذا المجلد.
• android و ios: تمكين شاشة البداية لكل من أنظمة Android و iOS.

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

تشغيل حزمة flutter_native_splash

بعد إعداد الحزمة في ملف pubspec.yaml، قم بتشغيل الأمر التالي لتطبيق التغييرات:

flutter pub run flutter_native_splash:create

سيقوم هذا الأمر بتحديث ملفات المشروع لإضافة شاشة البداية المخصصة بناءً على الإعدادات التي قمت بتحديدها.

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

تشغيل التطبيق

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

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

نصائح وإضافات

تخصيص متقدم

يمكنك إضافة المزيد من الخيارات لتخصيص شاشة البداية (Splash Screen) بشكل أكبر. على سبيل المثال، يمكنك ضبط الحجم الخاص بالصورة أو إضافة أنماط مختلفة لنظامي iOS و Android.

flutter_native_splash:
  color: "#ffffff"
  image: assets/splash.png
  android: true
  ios: true
  android_gravity: center
  ios_content_mode: scaleAspectFill
  background_image: assets/background.png

• android_gravity: تحديد موضع الصورة في شاشة البداية لنظام Android.
• ios_content_mode: تحديد طريقة عرض الصورة في شاشة البداية لنظام iOS.
• background_image: إضافة صورة خلفية لشاشة البداية.

إزالة شاشة البداية

إذا كنت ترغب في إزالة شاشة البداية في المستقبل، يمكنك استخدام الأمر التالي:

flutter pub run flutter_native_splash:remove

“اقرأ أيضاً: شرح استخدام introduction_screen في Flutter“

باستخدام حزمة flutter_native_splash، يمكنك إعداد شاشة بداية مخصصة (Splash Screen) بسهولة لتحسين تجربة المستخدم عند فتح التطبيق. توفر هذه الحزمة خيارات مرنة لتخصيص الشاشة لتتناسب مع هوية وتصميم تطبيقك.