تعلّم كيف تجعل BottomNavigationBar يظهر في كل الشاشات في تطبيقات Flutter

List<GlobalKey<NavigatorState>> navigatorKeys = [
  GlobalKey<NavigatorState>(),
  GlobalKey<NavigatorState>(),
  GlobalKey<NavigatorState>(),
];

ما فائدة استخدام GlobalKeys هنا؟

List<Widget> _buildScreens() {
  return [
    Navigator(
      key: navigatorKeys[0],
      onGenerateRoute: (routeSettings) {
        return MaterialPageRoute(
          builder: (context) => Screen1(), // شاشة الـ Tab الأول
        );
      },
    ),
    Navigator(
      key: navigatorKeys[1],
      onGenerateRoute: (routeSettings) {
        return MaterialPageRoute(
          builder: (context) => Screen2(), // شاشة الـ Tab الثاني
        );
      },
    ),
    Navigator(
      key: navigatorKeys[2],
      onGenerateRoute: (routeSettings) {
        return MaterialPageRoute(
          builder: (context) => Screen3(), // شاشة الـ Tab الثالث
        );
      },
    ),
  ];
}

لماذا نستخدم onGenerateRoute؟

استخدم IndexedStack مع BottomNavigationBar

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _selectedIndex = 0; // الفهرس الذي يمثل الـ Tab النشط

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IndexedStack(
        index: _selectedIndex,
        children: _buildScreens(), // بناء الشاشات الخاصة بكل Tab
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            label: 'Business',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            label: 'School',
          ),
        ],
      ),
    );
  }
}

لماذا استخدام IndexedStack؟