تجربة المستخدم عند فتح التطبيق تُعد من أهم اللحظات التي تحدد الانطباع الأول عن جودة التطبيق وسلاسته. في تطبيقات Flutter، قد يلاحظ بعض المطورين ظهور شاشة بدء نظامية على Android 12 وما بعده، تحتوي على أيقونة التطبيق في المنتصف، ثم تنتقل بسرعة إلى شاشة Splash المصممة داخل Flutter.

هذا الانتقال المفاجئ قد يسبب شعورًا بالتقطّع أو الجمود، خصوصًا إذا كان التطبيق يحتوي على شاشة بداية مخصصة أو رسوم متحركة. في هذا المقال سنشرح سبب المشكلة، ولماذا قد لا تكفي الحلول التقليدية، وكيفية حلها باستخدام Transparent Launch Theme.

عند تشغيل تطبيق Flutter على Android، تمر عملية الإقلاع بمرحلتين أساسيتين:

ابتداءً من Android 12، أصبح النظام يفرض سلوكًا افتراضيًا لشاشة البداية، وغالبًا ما يظهر أيقونة التطبيق في المنتصف. إذا كان تصميم هذه الشاشة مختلفًا عن شاشة Flutter، تظهر قفزة بصرية غير مريحة للمستخدم.

حزمة flutter_native_splash مفيدة جدًا لإنشاء شاشة بداية ثابتة، لكنها لا تمنحك دائمًا تحكمًا كاملًا في جميع الحالات، خاصة على Android 12 وما بعده.

الفكرة هنا بسيطة: بدلًا من محاولة جعل شاشة Android تطابق شاشة Flutter، نجعل شاشة الإطلاق الأصلية شفافة، ونترك التحكم الكامل لشاشة Flutter الأولى.

افتح الملف التالي:

android/app/src/main/res/values/styles.xml

ثم أضف الثيم التالي:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="TransparentLaunchTheme" parent="@android:style/Theme.Translucent.NoTitleBar">
        <item name="android:windowBackground">@android:color/transparent</item>
        <item name="android:windowContentOverlay">@null</item>
        <item name="android:backgroundDimEnabled">false</item>
    </style>

    <style name="NormalTheme" parent="@android:style/Theme.Light.NoTitleBar">
        <item name="android:windowBackground">?android:colorBackground</item>
    </style>
</resources>

بعد إنشاء الثيم، افتح ملف:

android/app/src/main/AndroidManifest.xml

وابحث عن:

android:theme="@style/LaunchTheme"

واستبدلها بـ:

android:theme="@style/TransparentLaunchTheme"

هذا الثيم يجعل نافذة الإطلاق شفافة وبدون شريط عنوان، مما يساعد على إزالة الظهور الافتراضي غير المرغوب لشاشة النظام.

السطر التالي هو الأهم:

<item name="android:windowBackground">@android:color/transparent</item>

وهو المسؤول عن جعل خلفية نافذة التشغيل شفافة بالكامل.

تعطيل التعتيم يمنع ظهور أي طبقة غامقة أو تأثير بصري قد يفسد الانتقال إلى شاشة Flutter.

إذا كان تطبيقك يدعم Dark Mode، فتأكد من إضافة نفس الثيم داخل مجلد:

android/app/src/main/res/values-night/styles.xml

عدم تعريف الثيم في الوضع الليلي قد يجعل النظام يستخدم Theme مختلفًا، مما يؤدي إلى عودة المشكلة عند تفعيل Dark Mode.

مشكلة ظهور Native Splash الافتراضية في تطبيقات Flutter على Android 12 قد تؤثر على الانطباع الأول للمستخدم، خصوصًا عند وجود شاشة بداية مخصصة داخل التطبيق. استخدام Transparent Launch Theme يمنحك حلًا عمليًا وأنيقًا لإخفاء شاشة النظام وترك التحكم الكامل لواجهة Flutter.

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