عناوين تتصفّحها بسلاسة

قارئ أخبار متعدد المنصات يتيح تصفّح أبرز العناوين حسب الفئة، والبحث في المقالات، وقراءة القصة كاملة داخل التطبيق.

FlutterDartNewsAPIdioWebView

جرّبه

تحميل APK GitHub

استكشف الشاشات ابدأ مشروعاً

9:41

الغاية

لماذا صُنع هذا المنتج.

معظم تطبيقات الأخبار ترمي العناوين في قائمة لا تنتهي. News Snap يجعل متابعة الأخبار أقرب إلى تقليب مجموعة بطاقات: اسحب القصة، بدّل الفئة، واقرأ المقال كاملاً من دون الانتقال إلى المتصفح.

من داخل المشروع

مدروس من البداية حتى النهاية.

5 نقاط بارزة

تكامل NewsAPI: بنيت طبقة شبكات نظيفة باستخدام dio ونماذج مكتوبة الأنواع لجلب العناوين حسب الفئة وعرضها.

قراءة داخل التطبيق: دمجت WebView لفتح المقال كاملاً من دون مغادرة التطبيق.

واجهة إيماءات مخصصة: صمّمت وطرحت SwipeableStack بحركة فيزيائية، وAnimatedTabSelector كمكوّنات قابلة لإعادة الاستخدام.

الأداء: استخدمت صوراً مخزّنة وواجهة dark-first لتصفّح سريع على الجوال.

متعدد المنصات: قاعدة Flutter واحدة تستهدف Android وiOS والويب وسطح المكتب.

التحديات

القيود التي بنيت الحل حولها.

ما يبدو بسيطاً في الواجهة كان أصعب ما في التنفيذ.

01
خلاصة تشبه مجموعة بطاقات
المشكلة
قوائم الـ widgets الافتراضية جعلت الأخبار تبدو مستهلكة ومطابقة لأي قارئ آخر.
كيف بنيت الحل
صمّمت SwipeableStack بحركة فيزيائية مع رمي وإزاحة ودوران، ليصبح كل عنوان بطاقة تتعامل معها فعلاً.
02
تبديل الفئات من دون تبويبات جاهزة
المشكلة
TabBar الجاهز لم يكن يحمل الواجهة الداكنة والملموسة التي يستهدفها باقي التطبيق.
كيف بنيت الحل
بنيت AnimatedTabSelector كمكوّن قابل لإعادة الاستخدام مع مؤشر دائرة متحرك وألوان مخصصة وحركة مضبوطة بالـ curves.
03
اقرأ القصة من دون مغادرة التطبيق
المشكلة
فتح Chrome يقطع الجلسة ويفسد التجربة: يخرج المستخدم ونادراً ما يعود إلى العنوان التالي.
كيف بنيت الحل
ربطت طبقة شبكات مكتوبة الأنواع عبر dio بـ WebView داخل التطبيق، لتبقى البحث والفئات والمقالات الكاملة داخل تجربة dark-first مع صور مخزّنة.