NavigationBar

شريط تنقّل سفلي (Material 3) NavigationBar

NavigationBar شريط تنقّل سفلي بتصميم Material 3 — يبدّل بين شاشات رئيسية قليلة (2-5 عادة) بضغطة واحدة.

النسخة الحديثة من BottomNavigationBar القديم (Material 2). selectedIndex يحدّد الوجهة النشطة، وdestinations قائمة NavigationDestination لكل وجهة.

الصياغة

NavigationBar(
  selectedIndex: int,
  onDestinationSelected: (int index) { },
  destinations: [NavigationDestination(icon: Icon, label: String), ...],
)

📄 مثال

int index = 0;

NavigationBar(
  selectedIndex: index,
  onDestinationSelected: (i) => setState(() => index = i),
  destinations: const [
    NavigationDestination(icon: Icon(Icons.home), label: 'الرئيسية'),
    NavigationDestination(icon: Icon(Icons.search), label: 'بحث'),
    NavigationDestination(icon: Icon(Icons.person), label: 'حسابي'),
  ],
)

أهم المعاملات

المعامل	الوظيفة
selectedIndex	فهرس الوجهة النشطة حاليًا
onDestinationSelected	يُستدعى بالفهرس الجديد عند الضغط على وجهة
destinations	قائمة NavigationDestination، كل واحدة بأيقونة ونص

💡 نصائح عملية

اربطه مع IndexedStack بدل استبدال الشاشة بالكامل — يحافظ على حالة كل شاشة (مثل موضع التمرير) عند التنقّل بينها

⚠️ أخطاء شائعة

استخدام BottomNavigationBar (Material 2) بمشروع جديد بدل NavigationBar — الأخير هو المعتمد بتصميم Material 3 الحالي

خصائص ذات صلة

Scaffold هيكل الشاشة الأساسي

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار FLUTTER الكامل بالعربي.