كيفية إضافة شاشة ترحيبية إلى تطبيق Flutter باحترافية

لماذا تُعد الشاشة الترحيبية مهمة في تطبيقات Flutter؟

تُعد الشاشة الترحيبية، أو Splash Screen، أول واجهة يراها المستخدم عند تشغيل التطبيق وقبل تحميل الصفحة الرئيسية. ورغم أنها تظهر لثوانٍ معدودة فقط، فإن تأثيرها كبير في تشكيل الانطباع الأول عن التطبيق من حيث الاحترافية والهوية البصرية وتجربة الاستخدام.

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

نظرة عامة على إضافة Splash Screen في Flutter

في بيئة Flutter، يمكن تنفيذ شاشة ترحيبية بعدة طرق، منها التعديل على الشيفرة الأصلية الخاصة بمنصتي Android وiOS. لكن إن كنت تبحث عن حل سريع وبسيط دون الدخول في التفاصيل الأصلية، فبإمكانك الاستفادة من حزمة splashscreen.

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

إنشاء مشروع Flutter جديد

قبل البدء، تأكد من تثبيت Flutter SDK وجميع الأدوات اللازمة لتطوير التطبيقات. بعد ذلك، أنشئ مشروعاً جديداً عبر تنفيذ الأمر التالي:

flutter create splashSceenExample

بعد إنشاء المشروع، انتقل إلى مجلد المشروع ثم شغّله باستخدام الأمر التالي:

flutter run

إذا تم الإعداد بنجاح، فسيعمل التطبيق على المحاكي أو الجهاز الحقيقي المتصل.

تثبيت حزمة splashscreen

بعد تشغيل المشروع، تأتي الخطوة التالية وهي إضافة الاعتمادية المطلوبة. بدلاً من التعامل مع ملفات Android وiOS الأصلية، يمكنك تثبيت الحزمة مباشرة داخل ملف pubspec.yaml.

أضف السطر التالي ضمن قسم الاعتماديات:

splashscreen: ^1.3.5

توفر هذه الحزمة ويدجت باسم SplashScreen، وهي المسؤولة عن عرض الشاشة الترحيبية قبل الانتقال إلى الشاشة الرئيسية للتطبيق.

كيفية إضافة شاشة ترحيبية إلى التطبيق

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

إليك مثالاً عملياً على ذلك:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: SplashScreen(
        seconds: 8,
        navigateAfterSeconds: MyHomePage(title: 'Flutter Demo Home Page'),
        title: Text(
          'SplashScreen Example',
          style: TextStyle(
            fontWeight: FontWeight.bold,
            fontSize: 20.0,
            color: Colors.white,
          ),
        ),
        backgroundColor: Colors.lightBlue[200],
      ),
    );
  }
}

في هذا المثال، تم استخدام SplashScreen لتحديد شاشة البداية، مع تعيين مدة الظهور والنص المعروض ولون الخلفية والشاشة التي سيتم فتحها بعد انتهاء المدة.

شرح أهم الخصائص داخل SplashScreen

• seconds: تحدد عدد الثواني التي ستبقى خلالها الشاشة الترحيبية ظاهرة.
• navigateAfterSeconds: تحدد الشاشة أو الويدجت التي سيتم الانتقال إليها بعد انتهاء الوقت.
• title: تضيف نصاً يظهر داخل الشاشة الترحيبية.
• backgroundColor: يحدد لون خلفية الشاشة.

بهذا التكوين، سيظهر للمستخدم نص ترحيبي بسيط قبل تحميل الصفحة الرئيسية. كما أن مؤشر التحميل يظهر افتراضياً في الحزمة.

وإذا رغبت في التحكم بظهور مؤشر التحميل، يمكنك استخدام الخاصية useLoader وتعيينها إلى true أو false حسب الحاجة.

تخصيص مؤشر التحميل داخل الشاشة الترحيبية

توفر الحزمة مؤشراً افتراضياً للتحميل، لكن يمكنك تخصيص مظهره بسهولة، وخصوصاً لونه، عبر الخاصية loaderColor. وهذا مفيد للحفاظ على انسجام التصميم مع هوية التطبيق.

home: SplashScreen(
  seconds: 8,
  navigateAfterSeconds: MyHomePage(title: 'Flutter Demo Home Page'),
  title: Text(
    'SplashScreen Example',
    style: TextStyle(
      fontWeight: FontWeight.bold,
      fontSize: 20.0,
      color: Colors.white,
    ),
  ),
  backgroundColor: Colors.blue,
  styleTextUnderTheLoader: TextStyle(),
  loaderColor: Colors.white,
)

في المثال السابق، تم تغيير لون مؤشر التحميل إلى الأبيض ليظهر بشكل أوضح فوق الخلفية الزرقاء.

إضافة صورة أو شعار إلى شاشة Splash Screen

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

تدعم ويدجت SplashScreen خاصيتين مهمتين لهذا الغرض:

• image: لإضافة صورة من ملفات المشروع أو من الشبكة.
• photoSize: لتحديد أبعاد الصورة المعروضة.

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

بعد إضافة الصورة إلى مجلد ./assets وتسجيل مسارها داخل ملف pubspec.yaml، يمكنك استخدامها كما يلي:

home: SplashScreen(
  seconds: 5,
  navigateAfterSeconds: MyHomePage(title: 'Flutter Demo Home Page'),
  title: Text(
    'SplashScreen Example',
    style: TextStyle(
      fontWeight: FontWeight.bold,
      fontSize: 20.0,
      color: Colors.white,
    ),
  ),
  image: Image.asset('assets/flut.png'),
  photoSize: 100.0,
  backgroundColor: Colors.blue,
  styleTextUnderTheLoader: TextStyle(),
  loaderColor: Colors.white,
)

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

أفضل ممارسات عند تصميم شاشة ترحيبية في Flutter

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

متى تكون هذه الحزمة كافية، ومتى تحتاج إلى حل مخصص؟

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

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

الخلاصة التقنية

إضافة شاشة ترحيبية في Flutter ليست مهمة معقدة، خصوصاً عند استخدام حزمة splashscreen التي تختصر كثيراً من العمل. من الناحية التقنية، تُعد هذه الطريقة مناسبة للتطبيقات التي تحتاج إلى تنفيذ سريع ومنظم دون الدخول في الشيفرة الأصلية. ومع ذلك، إذا كان المشروع يتطلب تجربة بصرية متقدمة أو سلوكاً مخصصاً بالكامل، فالحل البرمجي اليدوي سيمنحك مرونة أكبر. المهم هو أن تكون الشاشة الترحيبية خفيفة، واضحة، ومتسقة مع هوية التطبيق حتى تؤدي دورها بكفاءة منذ اللحظة الأولى.