Flutter how to show the same bottom navigation bar to a sub screen

Question

I have bottom navigation buttons, for three screens, but one of the screens has a subscreen, in this case the Profile Screen has a EditProfileScreen as a subscreen, when i navigate.push to the EditProfileScreen the bottom navigation bar dissapears. i want to have the same bottom navigation bar that i had in ProfileScreen to the EditProfileScreen. I saw some tutorials on it of people fixing this but i couldnt implement it on my project. If someone could show how this is done and implement it i would highly appreciate it.

int pageIndex = 0;

List<Widget> pageList = <Widget>[
  const IsUserWorking(),
  const ReportsScreen(),
  const ProfileScreen(),
];

class IsUserWorking extends StatelessWidget {
  const IsUserWorking({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<SharedPreferences>(
      future: SharedPreferences.getInstance(),
      builder: (context, snapshot) {
        var isWorking = snapshot.data?.getString('isWorking');
        if (isWorking != null) {
          return const StopWorkingScreen();
        }
        return const WorkingScreen();
      },
    );
  }
}

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

  @override
  State<ScreensWithBottomNavigation> createState() =>
      _ScreensWithBottomNavigation();
}

class _ScreensWithBottomNavigation extends State<ScreensWithBottomNavigation> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: pageList[pageIndex],
      bottomNavigationBar: ClipRRect(
        borderRadius: const BorderRadius.only(
          topLeft: Radius.circular(30.0),
          topRight: Radius.circular(30.0),
        ),
        child: BottomNavigationBar(
          unselectedItemColor: Colors.white,
          currentIndex: pageIndex,
          onTap: (value) {
            setState(() {
              pageIndex = value;
            });
          },
          items: const <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: Icon(Icons.assignment_ind_outlined),
              label: 'Working',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.assessment_outlined),
              label: 'Reports',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.school_outlined),
              label: 'Profile',
            ),
          ],
          backgroundColor: Colors.blue.shade100,
          // currentIndex: _selectedIndex,
          // selectedItemColor: Colors.amber[800],
          // onTap: _onItemTapped,
        ),
      ),
    );
  }
}

Answer 1

Take a look at persistent_bottom_nav_bar, I think it's exactly what you're looking for.