حل بسيط لمشكلة شاشة التمهيد (Splash Screen) في Flutter على Android 12

Flutter ١٤ سبتمبر ٢٠٢٤

إحدى المشكلات الشائعة التي يواجهها مطورو Flutter هي إعداد شاشة التمهيد (Splash Screen)، خاصة عندما يتضمن التصميم شعار التطبيق واسمه معًا. وعلى الرغم من أن هذا التصميم يعمل بشكل صحيح على جميع إصدارات iOS وAndroid، إلا أن إصدارات Android 12 وما بعدها تتطلب أبعادًا محددة لشاشة التمهيد بسبب القيود المفروضة. هذه القيود تم توضيحها على الموقع الرسمي لـAndroid.

رابط: القيود الخاصة بشاشة التمهيد في Android.

بعض مطوري Flutter يفضلون تجنب التلاعب بملفات Android، حيث أن الحل التقليدي يتطلب إنشاء صورة Splash مشابهة لإنشاء أيقونة إطلاق التطبيق (Launch Icon)، مما يستدعي العمل مع ملفات Android وإضافة صورة جديدة في مجلد drawable وضبط الأبعاد، وهي خطوات قد تبدو معقدة للبعض. لكن لا تقلق، سأقدم لك الحل الأسرع والأبسط!

الخطوات السهلة لتحضير صورة Splash متوافقة مع Android 12:

  1. افتح شعار التطبيق في برنامج Adobe XD أو Figma.
  2. أنشئ مربعًا بحجم 640x640 بكسل، ثم اضبط نصف قطر الزوايا ليصبح 320 بكسل للحصول على شكل دائري.
  3. ضع الشعار داخل الدائرة وقم بتكبيره لملء المساحة الدائرية بالكامل دون قص، مع مراعاة مسافة الـ Padding المطلوبة، ثم اجمع العناصر في مجموعة واحدة (Make Group).
  4. ضع المجموعة داخل مربع آخر بحجم 960x960 بكسل، ثم اضبطها في منتصف المربع الجديد.
  5. قم بتصدير الصورة بدقة 1x.

الآن، أصبحت الصورة جاهزة لشاشة التمهيد على Android 12.

بإمكانك إضافة الصورة التي قمت بتصميمها إلى مجلد assets/images في مشروعك واستدعاء المسار في ملف YAML الخاص بحزمة flutter_native_splash

رابط: flutter_native_splash.

بهذه الخطوات السهلة، ستتمكن من إنشاء شاشة تمهيد متوافقة مع Android 12 بسهولة وسرعة!

تصنيفات