BottomNavigationBar

🔹 ما هو BottomNavigationBar ؟

• هو شريط تنقل يظهر أسفل التطبيق.
• يحتوي على أيقونات (وأحيانًا نصوص) تمثل أقسام التطبيق الرئيسية.
• يشبه كثيرًا التبويبات (TabBar) لكن الفرق أنه دائمًا ثابت بأسفل الشاشة.

🔹 مثال بسيط

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int _selectedIndex = 0;

  final List<Widget> _pages = [
    Center(child: Text("الرئيسية")),
    Center(child: Text("المفضلة")),
    Center(child: Text("الإعدادات")),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("BottomNavigationBar")),
        body: _pages[_selectedIndex],
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: _selectedIndex,
          onTap: _onItemTapped,
          items: const [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: "الرئيسية",
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.star),
              label: "المفضلة",
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              label: "الإعدادات",
            ),
          ],
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int _selectedIndex = 0;

  final List<Widget> _pages = [
    Center(child: Text("الرئيسية")),
    Center(child: Text("المفضلة")),
    Center(child: Text("الإعدادات")),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("BottomNavigationBar")),
        body: _pages[_selectedIndex],
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: _selectedIndex,
          onTap: _onItemTapped,
          items: const [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: "الرئيسية",
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.star),
              label: "المفضلة",
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              label: "الإعدادات",
            ),
          ],
        ),
      ),
    );
  }
}

🔹 أهم الخصائص

1. items

• قائمة من BottomNavigationBarItem.
• كل عنصر يحتوي على:
  • icon: الأيقونة.
  • label أو title: النص أسفل الأيقونة.
  • activeIcon: أيقونة بديلة عندما يكون العنصر نشطًا.

2. currentIndex

• تحدد أي عنصر نشط حاليًا (مؤشر يبدأ من 0).

3. onTap

• دالة تستدعى عند الضغط على عنصر، تعطيك رقم العنصر (index).
• عادة تُستخدم مع setState لتغيير الصفحة.

4. type

• تتحكم بطريقة عرض الأيقونات/النصوص:
  • BottomNavigationBarType.fixed (افتراضي): جميع العناصر تظهر نصوصها، حتى لو كثيرة.
  • BottomNavigationBarType.shifting: النص يظهر فقط للعنصر النشط، مع تأثير لوني جميل.

5. selectedItemColor / unselectedItemColor

• لون العنصر النشط مقابل غير النشط.

6. backgroundColor

• اللون الخلفي للشريط بالكامل.

7. iconSize

• حجم الأيقونات (افتراضي 24).

8. showSelectedLabels / showUnselectedLabels

• تتحكم في إظهار أو إخفاء النصوص أسفل الأيقونات.

🔹 أماكن وحالات الاستخدام

• التطبيقات اللي عندها أقسام أساسية (الرئيسية – البحث – الإشعارات – الحساب).
• بديل لـ Drawer أو TabBar لما تكون الأقسام قليلة (3–5).
• جيد للتطبيقات اللي فيها تنقل سريع بين شاشات رئيسية.

🔹 نصائح

1. لا تستخدم أكثر من 5 عناصر (مزدحم ويقلل تجربة المستخدم).
2. إذا عندك أقسام كثيرة → استخدم Drawer أو NavigationRail.
3. إذا أردت أن تختفي/تظهر الـ BottomNavigationBar حسب الصفحة → غلّفه بـ Visibility أو Offstage.
4. من الأفضل أن تبني التنقل بـ IndexedStack بدل من استبدال كامل الصفحة (يحافظ على حالة الصفحات).

🔹 مثال متقدم (مع ألوان وأنماط مختلفة)

bottomNavigationBar: BottomNavigationBar(
  type: BottomNavigationBarType.shifting,
  currentIndex: _selectedIndex,
  onTap: _onItemTapped,
  items: const [
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      label: "الرئيسية",
      backgroundColor: Colors.teal,
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.star),
      label: "المفضلة",
      backgroundColor: Colors.purple,
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.settings),
      label: "الإعدادات",
      backgroundColor: Colors.indigo,
    ),
  ],
),

bottomNavigationBar: BottomNavigationBar(
  type: BottomNavigationBarType.shifting,
  currentIndex: _selectedIndex,
  onTap: _onItemTapped,
  items: const [
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      label: "الرئيسية",
      backgroundColor: Colors.teal,
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.star),
      label: "المفضلة",
      backgroundColor: Colors.purple,
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.settings),
      label: "الإعدادات",
      backgroundColor: Colors.indigo,
    ),
  ],
),

✨ الخلاصة:

• BottomNavigationBar = شريط تنقل سفلي لعرض 3–5 أقسام رئيسية.
• يعتمد على currentIndex + onTap لإدارة التنقل.
• type يحدد الشكل (ثابت أو متغير).
• يمكن تنسيقه بالكامل بالألوان، الأحجام، إخفاء/إظهار النصوص.