تخطَّ إلى المحتوى
كل المشاريع
الكود متاح مفتوح المصدرمنتجاتي

video_walkthrough

شاشات تعريف متحركة في ويدجت Flutter واحدة

باكدج Flutter لشاشات تعريف فوق فيديو خلفية: فيديو متكرر وصفحات متحركة ونقاط مؤشر وأزرار تخطي ومتابعة وابدأ في ويدجت واحدة. أُعيدت كتابتها في الإصدار 2.0.0 لـ Dart 3.

الدولة
مصر
النوع
الكود متاح
الفترة
2022–2026
المنصات
Android · iOS · Web
GitHub pub.dev
بانر video_walkthrough
إعادة كتابة لـ Dart 3
2.0.0
اختبار ويدجت ناجح
11

نظرة عامة

تحوّل video_walkthrough مسار التعريف بالتطبيق إلى ويدجت واحدة. تعطيها فيديو من الأصول وقائمة صفحات، فتشغّل الفيديو بملء الشاشة بشكل متكرر وتعرض الصفحات فوقه في PageView قابلة للسحب، وتتولى نقاط المؤشر وأزرار التخطي والمتابعة وزر البدء الأخير.

بُنيت أولًا لشاشات التعريف في تطبيق السياحة Visit Egypt ونُشرت على pub.dev في 2022، ولها الآن إعادة كتابة في الإصدار 2.0.0 لـ Flutter 3 و Dart 3 بواجهة برمجية مُنمّطة وتوثيق dartdoc و 11 اختبار ويدجت. وما زال pub.dev يقدّم الإصدار 1.0.1 حتى نشر 2.0.0.

أبرز الميزات

في ويدجت واحدة

  • فيديو خلفية: أي فيديو من الأصول، متكرر ومضبوط على ملء الشاشة، مع التحكم في الصوت والتكبير.
  • صفحات متحركة: صفحات Walkthrough تنزلق وتظهر تدريجيًا، أو مرّر أي ويدجت تريدها.
  • التخطي ينقل إلى الصفحة الأخيرة، والمتابعة تتقدم بحركة، والبدء ينهي المسار.
  • تخصيص كامل للنصوص والأنماط وألوان الأزرار والنقاط مع شعار اختياري قابل للتلوين.

آمنة ومرنة

  • إنهاء المسار عبر onFinish أو عبر pageRoute يُفتح فوق شاشة التعريف أو يحل محلها.
  • عند غياب الفيديو تظهر خلفية بلون ثابت.
  • تُستعاد أشرطة النظام عند التخلص من الويدجت، ولا يوجد أي force-unwrap.

الجديد في 2.0.0

  • النقاط غير النشطة تستخدم الآن indicatorInActiveColor مع اختبار يغطيها.
  • زر البدء دون pageRoute لم يعد يسبب انهيارًا: onFinish ثم pageRoute ثم لا شيء.
  • استُبدل FlatButton بأزرار Flutter 3.
  • حركة الصفحات التي بُنيت ولم تُطبَّق تعمل الآن.
  • واجهة برمجية مُنمّطة وتوثيق dartdoc كامل و 11 اختبار ويدجت.

اسحب للمزيد

إعادة كتابة 2.0.0: إصلاحات وواجهة مُنمّطة وتوثيق واختبارات
تطبيق المثال للإصدار 2.0.0، ملتقط من نسخة Flutter للويب
استخدام فعلي: شاشات التعريف في Visit Egypt
تسجيل العرض الأصلي من 2022

ملاحظات هندسية

  1. 01

    اختبار ويدجت فيديو بلا جهاز

    تستبدل الاختبارات VideoPlayerPlatform.instance بنسخة وهمية في الذاكرة تُبلغ عن فيديو 1080×1920 جاهز، فتتحقق من إنشاء الأصل وتكراره وتشغيله بالصوت المطلوب والتخلص منه، دون أي platform channels.

  2. 02

    تثبيت إصلاح ألوان النقاط

    لكل نقطة مفتاح ثابت، ويتحقق اختبار من ألوان النقاط النشطة وغير النشطة قبل التنقل بين الصفحات وبعده.

  3. 03

    Null-safety بلا مفاجآت

    استُبدل pageRoute! بترتيب صريح: onFinish ثم pageRoute ثم لا شيء.

  4. 04

    هادئة للمستخدم وواضحة للمطوّر

    إذا تعذّر تحميل الفيديو تستمر شاشات التعريف فوق backgroundColor، ويُسجَّل الخطأ عبر debugPrint.

  5. 05

    لقطات حقيقية لا تصاميم وهمية

    لقطات المثال مأخوذة من flutter build web لتطبيق المثال، مُشغَّلًا في Chrome بلا واجهة عبر بروتوكول DevTools.

النتائج

  • نُشرت على pub.dev في 2022 واستُخدمت فعليًا في شاشات التعريف بتطبيق Visit Egypt.
  • إعادة كتابة 2.0.0 لـ Flutter 3 و Dart 3 مع 11 اختبار ويدجت ناجحًا و flutter analyze بلا مشكلات.
  • مفتوحة المصدر برخصة MIT، مع تطبيق مثال قابل للتشغيل على Android و iOS والويب.

التقنيات

  • Flutter
  • Dart 3
  • video_player
  • PageView
  • AnimationController
  • Material 3
  • flutter_test
  • flutter_lints
  • pub.dev

الروابط

تواصل

تحتاج شيئًا مشابهًا؟

لنتحدث عن منتجك.

تواصل عبر واتساب