تعتبر شاشة البداية (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) بسهولة لتحسين تجربة المستخدم عند فتح التطبيق. توفر هذه الحزمة خيارات مرنة لتخصيص الشاشة لتتناسب مع هوية وتصميم تطبيقك.