Flutter - كيفية إضافة خلفية فيديو

صورة لـ Android Studio تظهر رمز Dart ومحاكي Android.

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

الافتراضات

سأفترض أن لديك بالفعل إعداد بيئة تطوير لـ Flutter ويمكنك إنشاء مشروع جديد. إذا لم يكن لديك إعداد بيئة ، أوصي بشدة بالاطلاع على الرابط أدناه.

كيفية الإعداد لتطوير Flutter

النتيجة النهائية

بعد قراءة هذه المقالة ، يجب أن تحقق النتائج الموضحة أدناه.

الخطوة 1

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

في ملف pubspec.yaml لتطبيقك ، أضف مشغل الفيديو إلى تبعياتك.

الخطوة 2

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

بمجرد إضافة الملفات الفعلية إلى مشروعك ، نحتاج إلى إضافة الرمز أدناه.

الخطوه 3

الآن دعنا نذهب إلى ملف main.dart الخاص بنا وقم بإعداد مشغل الفيديو. في الكود الخاص بي ، قمت بإنشاء StatefulWidget تسمى BackgroundVideo. في فئة _BackgroundVideoState ، لدي الرمز التالي. كما سترى في TODO 4 ، نحتاج إلى إنشاء كائن VideoPlayerController. ثم نلغي طريقة initState () لإعداد VideoPlayerController.

طريقة initState () الكاملة أدناه. أولاً ، نشير وحدة تحكم الفيديو إلى ملف الفيديو المحلي الذي أضفناه سابقًا. ثم عندما تتم تهيئة وحدة التحكم ، نقول لها تشغيل الفيديو في حلقة.

الخطوة 4

الآن بعد أن أصبح لدينا إعداد وحدة تحكم الفيديو لدينا ، يمكننا البدء في العمل على واجهة المستخدم لدينا. في أسلوبنا build () ، نعيد تطبيق MaterialApp. تحتوي خاصية المنزل على عنصر واجهة مستخدم SafeArea الذي يحتوي على سقالة كطفل. في سقالة ، نحتاج إلى تعيين خاصية الجسم إلى عنصر واجهة مستخدم المكدس. سيتيح لنا هذا إضافة مقطع فيديو كخلفية ثم تكديس عناصر واجهة مستخدم أخرى فوقه.

انتبه إلى FittedBox في شجرة الأدوات. لكي يبدو الفيديو الخاص بي بشكل صحيح ، كان علي أن أضبط خاصية الملاءمة على BoxFit.fill. ستلاحظ أن مشغل الفيديو الفعلي تابع لعنصر واجهة مستخدم SizedBox.

يجب أن تبدو شجرة القطعة الخاصة بك مثل هذا الآن.

الخطوة الخامسة

آخر شيء تريد القيام به هو تجاوز طريقة التخلص () حتى نتمكن من التعامل بشكل صحيح مع وحدة تحكم الفيديو الخاصة بنا طوال دورة حياة التطبيق.

إنتهيت! بمساعدة Flutter Package video_player ، أضفنا فيديو بنجاح إلى خلفية تطبيقنا.

للحصول على صورة أفضل للكود بأكمله ، قمت بمشاركة مشروعي على GitHub.

جيثوب ريبو: خلفية فيديو في Flutter

شكرا لك على وقتك وأتمنى لك الأفضل في مغامراتك في الترميز!

أنظر أيضا

كيف يمكنني إنشاء واجهة مستخدم مذهلة لتطبيق Android الخاص بي باستخدام Android Studio؟ أنا أتعلم وجديد في Android Studio وأخطط لإنشاء تطبيق سيقدم منتجاتي في مدينتي.كيف يمكنني إيقاف عبور العناصر عندما أقوم بتغيير حجم المستعرض في HTML / CSS؟ كيف آخذ مهارات تطوير الواجهة الأمامية الخاصة بي إلى المستوى التالي؟ لقد تعلمت أساسيات HTML و CSS وجافا سكريبت من خلال العديد من المصادر المجانية على الإنترنت مثل Codecademy ، ولكن لا يمكنني العثور على موارد متقدمة على الإنترنت.كم من الوقت يستغرق لتصبح مطور ويب كامل كمبتدئ إذا أعطيت ساعتين يوميًا لذلك؟ كيفية صنع هرم من لغس]كيف يمكنني تصميم صفحة المنشورات بحيث تحتوي المشاركات الأربعة الأولى على مجموعة فريدة من الأنماط لكل منشور والمجموعة الثانية من المنشورات الأربعة لها نمط آخر لكل مشاركة ؛ بينما تتكرر أنماط هذه الثماني إلى المنشورات التالية في موقع الفسفور الأبيض الخاص بي؟كيف يمكنني تحسين مهارات البرمجة في Python؟ انا مبتدئ.كيف أبدأ في برمجة التطبيقات ومواقع الويب بسرعة؟