الفصل الخامس – القسم الأول: هيكل التطبيق والتنقل

مصدر الصورة

1. Scaffold

لو قلنا إن التطبيق عبارة عن بيت، فالـ Scaffold هو الأساس اللي بيتبني فوقه كل حاجة.
هو Widget رئيسي يوفر لك:

• AppBar (شريط علوي)
• Drawer (قائمة جانبية)
• BottomNavigationBar (قائمة سفلية)
• FloatingActionButton (زر دائري طائر)
• Body (المحتوى الأساسي للشاشة)

Scaffold(
  appBar: AppBar(
    title: Text('مثال على Scaffold'),
  ),
  body: Center(child: Text('مرحبا بكم في Flutter!')),
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.add),
  ),
);

النتيجة: شاشة كاملة جاهزة، فيها عنوان، محتوى، وزر عائم.

2. AppBar

هو الشريط العلوي اللي بيظهر في معظم التطبيقات.
يستخدم لـ:

• عرض عنوان الشاشة.
• إضافة أيقونات مثل (بحث – إشعارات – إعدادات).
• أحيانًا بيحتوي على قائمة منسدلة أو أزرار تنقل.

AppBar(
  title: Text('الصفحة الرئيسية'),
  actions: [
    IconButton(
      icon: Icon(Icons.search),
      onPressed: () {},
    ),
  ],
)

3. Drawer

القائمة الجانبية اللي تنفتح بالسحب أو الضغط على أيقونة “≡”.
مفيدة لو عندك أقسام كتيرة في التطبيق.

Drawer(
  child: ListView(
    children: [
      DrawerHeader(
        child: Text('مرحبا بك'),
      ),
      ListTile(
        leading: Icon(Icons.home),
        title: Text('الرئيسية'),
        onTap: () {},
      ),
      ListTile(
        leading: Icon(Icons.settings),
        title: Text('الإعدادات'),
        onTap: () {},
      ),
    ],
  ),
)

4. BottomNavigationBar

لو تطبيقك فيه 3–5 أقسام رئيسية، التنقل السفلي أفضل من القائمة الجانبية.

BottomNavigationBar(
  items: const [
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      label: 'الرئيسية',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.search),
      label: 'بحث',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.person),
      label: 'حسابي',
    ),
  ],
)

5. TabBar & TabBarView

لو عندك تبويبات (Tabs) للتنقل بين محتويات داخل نفس الشاشة، زي “الأخبار – الفيديو – الصور”.

DefaultTabController(
  length: 3,
  child: Scaffold(
    appBar: AppBar(
      bottom: TabBar(
        tabs: [
          Tab(text: 'الأخبار'),
          Tab(text: 'الفيديو'),
          Tab(text: 'الصور'),
        ],
      ),
    ),
    body: TabBarView(
      children: [
        Center(child: Text('قسم الأخبار')),
        Center(child: Text('قسم الفيديو')),
        Center(child: Text('قسم الصور')),
      ],
    ),
  ),
);

الخلاصة

• Scaffold = أساس أي شاشة.
• AppBar = الشريط العلوي.
• Drawer = قائمة جانبية للتنقل.
• BottomNavigationBar = شريط سفلي للتنقل السريع.
• TabBar & TabBarView = للتبويبات داخل نفس الشاشة.