شرح كيفية إنشاء native splash screen في flutter

Ahmed Mahmoud

اخر تحديث :

شرح كيفية إنشاء native splash screen في flutter

لا تجد تطبيق عملاق لا يحتوي على native splash ولكن التطبيقات الضخمه لا تقوم بعملها مثل الطريقة العادية والتي تكون عباره عن class بداخله البيانات التي يعمل عليها بل تقوم بعمل شاشه انتظار الى ان يتم فتح التطبيق وسرعة فتح التطبيق تعتمد على عدة عوامل اولها وهي ان الجهاز يكون قوي ومناسب وايضا يعتمد على مبرمج التطبيق هل قام بالبرمجة الصحيحه التي تجعل التطبيق يعمل بشكل سريع ام لا وعليك بإضافة هذه الصفحة في البداية لاي مشروع تعمل عليه

ظهرت لغة دارت في سنة 2011 و فلاتر ظهر في سنة 2017 وهذا يعني انهاومن بيئات العمل الجديده وللمعلومية flutter من تطوير العملاق جوجل والتي تطور الكثير من اللغات وتهتم بعالم البرمجه بشكل كبير جدا وهي ايضا من قامت بتطوير كوتلن والمختصه بتطوير تطبيقات الاندرويد واصبحت المنافسه للجافا وذلك بعد المشاكل التي واجهتها جوجل بسبب التطبيقات المطوره باستخدام جافا على Google play واصبحت تقدم الكثير من libraries التي تسهل على المطورين العمل وتسهل عليهم الكثير من الوقت في انشاء وتطوير تطبيقات الجوال بشكل سريع .

Flutter كغيرها من بيئات العمل سوف تواجه مشاكل مع التطبيقات التي تظهر بواسطتها ولكن لا تقلق فقد لا تشاهد مشاكل سوا في المشاريع الكبيره جدا ولكن كتطبيقات بسيطه او متوسطه فلا تقلق منها اطلاقا ودائما نجد استمراريه في التطوير من قبل جوجل لحل المشاكل التي تواجه المستخدمين بشكل كبير ، وهذا ما يجعل المبرمجين ينتقلون الى هذه اللغه والتعامل معها في الفترات الاخيره وترك باقي اللغات ، ونحن سنشارك معكم شروحات في تطوير التطبيقات بشكل مبسط لكم .

تثبيت flutter تحميل flutter dartsdk شركة تطبيقات الجوال

اضافة مكتبة 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 ليتم تفعيل العمليات السابقه ويظهر لك نتيجه سواء بالنجاح او الفشل .