Flutter Navigation bottom bar not visible in all screens

Question

How can I see the NavigationBar throughout the app? also in the detail screens?

import 'package:flutter/material.dart';
import 'package:prestigeshop/app_bar/ui/app_bar_nav.dart';
import 'package:prestigeshop/pages/settings/ui/settings_page.dart';
import '../pages/bid/ui/card_page.dart';
import '../pages/home/ui/home_page.dart';
import '../widgets/custom_animated_bottom_bar.dart';

class NavigationPage extends StatefulWidget {
  const NavigationPage({Key? key}) : super(key: key);

  @override
  State<NavigationPage> createState() => _NavigationPageState();
}

class _NavigationPageState extends State<NavigationPage>
    with WidgetsBindingObserver {

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance!.addObserver(this);
  }

  @override
  void dispose() {
    WidgetsBinding.instance!.removeObserver(this);
    super.dispose();
  }

  int _currentIndex = 1;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: const AppBarNav(title: 'Prestige'),
      body: Stack(
        children: <Widget>[
          IndexedStack(
            index: _currentIndex,
            children: const <Widget>[
              HomePage(),
              CardPage(),
              HomePage(),
              HomePage(),
              SettingsPage(),
            ],
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: _buildBottomBar(),
          ),
        ],
      ),
    );
  }

  Widget _buildBottomBar() {
    return CustomAnimatedBottomBar(
      containerHeight: 70,
      backgroundColor: Theme.of(context).colorScheme.secondary,
      selectedIndex: _currentIndex,
      showElevation: true,
      itemCornerRadius: 24,
      curve: Curves.easeIn,
      onItemSelected: (index) => setState(() => _currentIndex = index),
      items: <BottomNavyBarItem>[
        BottomNavyBarItem(
          icon: const Icon(Icons.catching_pokemon_outlined),
          title: const Text('Home'),
          activeColor: Theme.of(context).colorScheme.tertiary,
          inactiveColor: Theme.of(context).colorScheme.tertiary,
          textAlign: TextAlign.center,
        ),
        BottomNavyBarItem(
          icon: const Icon(Icons.sell_outlined),
          title: const Text('Vendi'),
          activeColor: Theme.of(context).colorScheme.tertiary,
          inactiveColor: Theme.of(context).colorScheme.tertiary,
          textAlign: TextAlign.center,
        ),
        BottomNavyBarItem(
          icon: const Icon(Icons.search),
          title: const Text('Cerca'),
          activeColor: Theme.of(context).colorScheme.tertiary,
          inactiveColor: Theme.of(context).colorScheme.tertiary,
          textAlign: TextAlign.center,
        ),
        BottomNavyBarItem(
          icon: const Icon(Icons.notifications_none),
          title: const Text('Notifiche'),
          activeColor: Theme.of(context).colorScheme.tertiary,
          inactiveColor: Theme.of(context).colorScheme.tertiary,
          textAlign: TextAlign.center,
        ),
        BottomNavyBarItem(
          icon: const Icon(Icons.person_outline_sharp),
          title: const Text('Profilo'),
          activeColor: Theme.of(context).colorScheme.tertiary,
          inactiveColor: Theme.of(context).colorScheme.tertiary,
          textAlign: TextAlign.center,
        ),
      ],
    );
  }
  Widget getBody() {
    List<Widget> pages = [
      const HomePage(),
      const CardPage(),
      const HomePage(),
      const HomePage(),
      const SettingsPage()
    ];
    return IndexedStack(
      index: _currentIndex,
      children: pages,
    );
  }
}

You see the bottomNavBar only on the main screens, but not on the screens that I open later in one of the main ones. I would like to be able to see the navigationbar in all app screens. it's possible ?

Screen with navbar

Screen without navbar

Answer 1

You can solve that by wrapping your list page with Navigator() Widget.

Scaffold(
      body: IndexedStack(
        index: _currentIndex,
        children: const <Widget>[
          NavigatorWidget(HomePage()),
          NavigatorWidget(CardPage()),
         ...
        ],
      ),
...

class NavigatorWidget extends StatelessWidget {
  final Widget page;

  const NavigatorWidget({super.key, required this.page, this.navigatorKey});

  @override
  Widget build(BuildContext context) {
    return Navigator(
      onGenerateRoute: (settings) {
        return MaterialPageRoute(builder: (context) => page);
      },
    );
  }
}