Скачать или смотреть Flutter Sticky App | 2 | إنشاء Splash Screen و إضافة Animation بإستخدام flutter_animate

👋 مرحباً بكم في الفيديو الثاني من سلسلة بناء تطبيق Flutter Sticky App!

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

⏱️ الأقسام / Timestamps:

0:00 المقدمة

0:16 إضافة Assets

2:10 حذف كود الـ demo

2:35 إنشاء ملف splash_screen

3:05 كتابة الويدجت SplashScreen

4:00 إضافة Scaffold

4:10 إضافة Image.asset()

4:50 حدف Debug Banner

5:10 تعريف وشرح MediaQuery

6:30 تغيير حجم الشعار

7:20 إضافة Animations

7:40 flutter_animate باكج

8:02 إضافة الباكج للمشروع

8:20 تحريك الشعار

8:30 fadeIn animation

9:00 Duration

10:00 fadeout animation

10:30 add delay

11:13 onComplete function

11:50 إنشاء TabsScreen

12:36 توجيه إلى TabsScreen



ماذا ستتعلم في هذا الفيديو؟

📁 إضافة Assets: شرح الطريقة الصحيحة لإضافة الملفات الثابتة مثل الصور والشعارات إلى مشروع فلاتر الخاص بك واستخدامها.

✨ إنشاء Splash Screen: بناء واجهة شاشة البداية خطوة بخطوة.

🚀 استخدام flutter_animate: التعرف على مكتبة flutter_animate القوية وإمكانياتها في إضافة حركات أنيميشن بسهولة.

🎬 تطبيق Fade In & Fade Out: كيفية عمل تأثير الظهور التدريجي (Fade In) والتلاشي التدريجي (Fade Out) لعناصر الشاشة (مثل الشعار والنص).

➡️ التوجيه التلقائي: برمجة الانتقال من شاشة البداية إلى الشاشة الرئيسية للتطبيق (TabsScreen) تلقائياً بعد انتهاء الأنيميشن.

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


🔔 لا تنسَ الإعجاب بالفيديو والاشتراك في القناة وتفعيل جرس التنبيهات ليصلك كل جديد في سلسلة Flutter Sticky App وغيرها من الدروس المفيدة.

💬 شاركنا رأيك أو أي أسئلة لديك في قسم التعليقات أدناه!

#Flutter #Dart #Splash_Screen #flutter_animate #Animation #FlutterDev #UIUX #تطوير_تطبيقات #فلاتر #برمجة #شاشة_البداية #انيميشن