شرح كيفية إنشاء native splash screen في flutter
لا تجد تطبيق عملاق لا يحتوي على native splash ولكن التطبيقات الضخمه لا تقوم بعملها مثل الطريقة العادية والتي تكون عباره عن class بداخله البيانات التي يعمل عليها بل تقوم بعمل شاشه انتظار الى ان يتم فتح التطبيق وسرعة فتح التطبيق تعتمد على عدة عوامل اولها وهي ان الجهاز يكون قوي ومناسب وايضا يعتمد على مبرمج التطبيق هل قام بالبرمجة الصحيحه التي تجعل التطبيق يعمل بشكل سريع ام لا وعليك بإضافة هذه الصفحة في البداية لاي مشروع تعمل عليه
ظهرت لغة دارت في سنة 2011 و فلاتر ظهر في سنة 2017 وهذا يعني انهاومن بيئات العمل الجديده وللمعلومية flutter من تطوير العملاق جوجل والتي تطور الكثير من اللغات وتهتم بعالم البرمجه بشكل كبير جدا وهي ايضا من قامت بتطوير كوتلن والمختصه بتطوير تطبيقات الاندرويد واصبحت المنافسه للجافا وذلك بعد المشاكل التي واجهتها جوجل بسبب التطبيقات المطوره باستخدام جافا على Google play واصبحت تقدم الكثير من libraries التي تسهل على المطورين العمل وتسهل عليهم الكثير من الوقت في انشاء وتطوير تطبيقات الجوال بشكل سريع .
Flutter كغيرها من بيئات العمل سوف تواجه مشاكل مع التطبيقات التي تظهر بواسطتها ولكن لا تقلق فقد لا تشاهد مشاكل سوا في المشاريع الكبيره جدا ولكن كتطبيقات بسيطه او متوسطه فلا تقلق منها اطلاقا ودائما نجد استمراريه في التطوير من قبل جوجل لحل المشاكل التي تواجه المستخدمين بشكل كبير ، وهذا ما يجعل المبرمجين ينتقلون الى هذه اللغه والتعامل معها في الفترات الاخيره وترك باقي اللغات ، ونحن سنشارك معكم شروحات في تطوير التطبيقات بشكل مبسط لكم .
اضافة مكتبة flutter_native_splash
flutter_native_splash: ^2.0.1+1
رابط المكتبة على الموقع الرسمي
خطوات تفعيل native splash في flutter
بعد تثبيت المكتبة بالطريقة الصحيحه انتقل الى ملف pubspec.yaml وبعدها تقوم بوضع الكود التالي في المكان المخصص له كما هو موضح ولكن عليك ان تقوم بتثبيت المكتبة في المكان الصحيح وكل الامور واضحه جدا في الصوره التاليه يمكنك الاطلاع عليها لفهم كل شيئ , تنوية اذا كنت تريد ان تستخدم خلفيه للتصميم عليك بالغاء لون الخلفيه واذا كنت تريد استخدام لون قم بإلغاء الخلفيه لعدم حدوث مشاكل ايضا لا تنسى ان امتداد الصور يكون png .
pubspec.yaml
flutter_native_splash :
color: "#ffffff"
image: assets/images/book.png
// you can use .
background_image: assets/images/background-sunh.png
اضف الاكواد التاليه في الterminal
بعد تنفيذ الاوامر السابقه بشكل صحيح ياتي دور التفعيل وكل ما عليك هو نسخ الامر التالي ولصقه بداخل الterminal ليتم تفعيل العمليات السابقه ويظهر لك نتيجه سواء بالنجاح او الفشل .
flutter clean && flutter pub get && flutter pub run flutter_native_splash:create
فيديو الشرح
native splash screen في اصدارات اندرويد +12
flutter_native_splash:
android: true
ios: true
ios_15: true
image: "assets/native_splash_screen/logo_app.png"
background_image: "assets/native_splash_screen/background.png"
branding: "assets/native_splash_screen/branding.png"
image_dark: "assets/native_splash_screen/logo_app.png"
background_image_dark: "assets/native_splash_screen/background.png"
branding_dark: "assets/native_splash_screen/branding.png"
android_12:
color: "#2a5571"
image: "assets/native_splash_screen/android_logo_android.png"
branding: "assets/native_splash_screen/android_branding.png"
dart run flutter_native_splash:create --path=flutter_native_splash.yaml
<meta-dataandroid:name="io.flutter.embedding.android.SplashScreenDrawable"android:resource="@drawable/launch_background"/>
- تصميم صفحة تسجيل دخول احترافية في فلاتر مع animation
- الحصول على ابعاد الشاشه باستخدام MediaQuery في Flutter
- التعامل مع وضعيات الشاشة افقي وعمودي باستخدام OrientationBuilder في flutter
- انشاء مربع احترافي للتخفيضات في تطبيق متجرك بإستخدام Flutter
- كيفية عرض العناصر والصور والصفحات بداخل مربع والتنقل من خلاله في Flutter