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

 

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

شرح كيفية إنشاء 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 .


خطوات تفعيل native splash في flutter

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

قم بالانتقال الى الملف التالي وسوف تجد بداخله مجموعة من الخلفيات والصور والاحجام الطبيعيه لكل ملف لان اصدارات الاندرويد 12 واعلى تحتاج الى مقاسات معينه يمكنك تحميلها من الملف السابق والتعديل عليها ومن ثم ادراجها .

وبعدها قم بإنشاء ملف flutter_native_splash.YAML
ومن ثم اضف الاكواد التاليه بداخله وبعدها عدل عليها كما ترغب

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"

بعد الانتهاء قم بعمل الامر التالي داخل terminal
dart run flutter_native_splash:create --path=flutter_native_splash.yaml
اخيرا انتقل الى المسار التالي android/app/src/main/AndroidManifest.xml
وضع بداخله الاكواد التاليه اسفل application
<meta-data
 android:name="io.flutter.embedding.android.SplashScreenDrawable"
 android:resource="@drawable/launch_background"
 />
مزيد من الدروس :

تعليقات