BackButton and BottomNavigationBar

Question

I want to navigate between my pages, when I'm on the settings page I want a back button that takes me to the home page and the same for the favorites, from my pages there is also a bottom navigation bar that allows you to navigate between them. I have already tried with the Navigator() but it forces me to put another button on the home page. I don't know if I made myself clear, but I hope you can help me.

Thank you!

Update : I have used getX 's package.

Answer 1

If the settings page doesn't include the bottom app bar, then you can use Navigator.of(context).pop() or you can use a top app bar and set automaticallyImplyLeading = true to display a back button which also pops.

Here is a example of one of my bottom app bars which allows smooth navigation across multiple pages:

class _MainScreenState extends State<MainScreen> {
 

  int _currentIndex = 0;
  final List<Widget> _children = [
    Home(),
    InboxMain(),
    DashboardMain(),
    ProfileMain(),
    FriendsMain()
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _children[_currentIndex],
      bottomNavigationBar: new Theme(
        data: Theme.of(context).copyWith(
          canvasColor: Color.fromRGBO(41, 34, 78, 1),
        ), //
        child: BottomNavigationBar(
          //selectedItemColor: Colors.red,
          //selectedIconTheme: IconThemeData(color: Colors.red),
          type: BottomNavigationBarType.fixed,  
          showSelectedLabels: false,
          showUnselectedLabels: false,
          backgroundColor: Color.fromRGBO(41, 34, 78, 1),
          onTap: onTabTapped,
          currentIndex: _currentIndex,
          items: [
            BottomNavigationBarItem(
                icon: _currentIndex == 0
                    ?  Icon(Icons.home_outlined, color: Colors.white)
                    : Icon(
                        Icons.home_outlined,
                        color: Colors.grey[600],
                      ),
                title: Container(
                  height: 0,
                )),
            BottomNavigationBarItem(
                icon: _currentIndex == 1
                    ? Icon(
                        Icons.email_outlined,
                        color: Colors.white,
                      )
                    : Icon(
                        Icons.email_outlined,
                        color: Colors.grey[600],
                      ),
                title: Container(
                  height: 0,
                )),
            BottomNavigationBarItem(
                icon: _currentIndex == 2
                    ? Icon(Icons.dashboard, color: Colors.white)
                    : Icon(Icons.dashboard, color: Colors.grey[600]),
                title: Container(
                  height: 0,
                )),
            BottomNavigationBarItem(
                icon: _currentIndex == 3
                    ? Icon(
                        Icons.person,
                        color: Colors.white,
                      )
                    : Icon(Icons.person, color: Colors.grey[600]),
                title: Container(
                  height: 0,
                )),
            BottomNavigationBarItem(
                icon: _currentIndex == 4
                    ? Icon(
                        Icons.people_alt,
                        color: Colors.white,
                      )
                    : Icon(Icons.people_alt, color: Colors.grey[600]),
                title: Container(
                  height: 0,
                )),
          ],
        ),
      ),
    );
  }

  void onTabTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
  }
}

My app (once logged in) navigates to this, and all navigation is controlled here, other than extended screens which I use a back button and pop().