Flutter Sticky App | 3 | شرح الـ TabBar و TabBarView.

👋 مرحباً بكم في الجزء الثالث من سلسلة بناء تطبيق Flutter Sticky App!

في هذا الفيديو، نواصل رحلتنا ونغوص في كيفية إنشاء واجهة مستخدم تفاعلية ومنظمة باستخدام علامات التبويب (Tabs) في فلاتر. سنركز بشكل أساسي على كيفية دمج واستخدام TabBar و TabBarView بفعالية.

ماذا ستتعلم في هذا الفيديو؟

البداية مع Column: نستعرض كيف بدأنا باستخدام الويدجت Column لترتيب العناصر بشكل عمودي كأساس لواجهتنا.
إضافة TabBar: نشرح خطوة بخطوة كيفية إضافة TabBar داخل الـ Column وتضمين علامات التبويب (Tabs) التي تمثل الأقسام المختلفة.
عرض المحتوى بـ TabBarView: نتعلم كيف نضيف TabBarView أسفل الـ TabBar في نفس الـ Column لعرض المحتوى المتغير لكل Tab.
استخدام Expanded: نوضح أهمية استخدام الويدجت Expanded لجعل TabBarView يملأ المساحة المتبقية في الشاشة بشكل صحيح.
ربط العناصر بـ DefaultTabController: نشرح كيف نستخدم DefaultTabController لتغليف الهيكل وربط TabBar بـ TabBarView بسهولة، مما يتيح التنقل السلس بين التبويبات ومحتوياتها.
ضمان التوافق مع الشاشات بـ SafeArea: نختتم بإضافة SafeArea حول الـ Column لضمان عرض الواجهة بشكل مثالي على مختلف الأجهزة وتجنب تداخلها مع حواف الشاشة أو الـ Notch.
انضم إلينا لتتعلم كيفية بناء واجهات مستخدم جذابة ومنظمة باستخدام نظام التبويبات في Flutter!

الأقسام:

0:00 المقدمة

0:50 إضافة Column

1:20 إضافة TabBar

1:40 إضافة Tabs

2:30 إضافة TabBarView

2:50 إضافة محتوى الـ views

3:48 إضافة Expanded

4:50 إضافة DefaultTabController

6:10 إضافة SafeArea
روابط مفيدة:

مستندات Flutter الرسمية: https://api.flutter.dev/flutter/material/TabBar-class.html

🔔 لا تنسوا الإعجاب بالفيديو والاشتراك بالقناة وتفعيل جرس التنبيهات ليصلكم كل جديد في عالم Flutter وتطوير التطبيقات!
💬 شاركونا أسئلتكم واستفساراتكم في التعليقات بالأسفل.

#Flutter #Dart #TabBar #TabBarView #FlutterTutorial #تطوير_تطبيقات #فلاتر #برمجة #Column #Expanded #SafeArea #DefaultTabController #StickyApp

Видео Flutter Sticky App | 3 | شرح الـ TabBar و TabBarView. канала Alsaee•Dev