how to navigate using BottomNavigationBar and also with ElevatedButton press in Flutter

Issue

I am using BottomNavigationBar in Flutter, what I wanted is to navigate between pages by clicking on BottomNavigationBarItem normally. And at the same time, navigate to other pages but in the same BottomNavigationBarItem. let me explain more by this example that I found Here

Saying that my BottomNavigationBar has two BottomNavigationBarItem: Call, and Message. And Call can navigate (using a Elevatedbotton click for example) to Page1 and Page2, while Message can navigate (by Elevatedbotton click) to Page3 and page4.

Like this:

• Call

  -Page1

  -Page2

• Message

  -Page3

  -Page4

This solution solved 50% of my problem, what I can do now is to navigate from Callto page1 and page2 always with keeping BottomNavigationBar alive, now it still remains the second part, which is clicking on another BottomNavigationBarItem in order to navigate to Message

Solution

You try this way.

class App extends StatefulWidget {
  // This widget is the root of your application.
  @override
  _AppState createState() => _AppState();
}

class _AppState extends State<App> {
  int _selectedIndex = 0;
  final GlobalKey<NavigatorState> _navigatorKey = GlobalKey<NavigatorState>();
  Route<dynamic> generateRoute(RouteSettings settings) {
    switch (settings.name) {
      case 'Site':
        return MaterialPageRoute(builder: (context) => SiteScreen());
     
      default:
        return MaterialPageRoute(builder: (context) => Home());
    }
  }

  void _onItemTapped(int index) {
    switch (index) {
      case 1:
        _navigatorKey.currentState!
            .pushNamedAndRemoveUntil("Site", (route) => false);
        break;
      default:
        _navigatorKey.currentState!
            .pushNamedAndRemoveUntil("Home", (route) => false);
    }
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.black,
        toolbarHeight: 0,
      ),
      body: Navigator(key: _navigatorKey, onGenerateRoute: generateRoute),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.favorite_border),
            label: 'Site',
          ),
         
        ],
        showSelectedLabels: true,
        showUnselectedLabels: false,
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.white,
        unselectedItemColor: Color(0xFF9e9e9e),
        iconSize: 20,
        backgroundColor: KBlackColor,
        onTap: _onItemTapped,
      ),
    );
  }
}

class Home extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            child: Column(children: [
                TextButton(
                    onPressed: () {
                        MaterialPageRoute(builder: (context) => SubHome())
                     },
                    child: Text('Click'),
                )
            ]),
        );
    }
}

class SubHome extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            child: Column(children: [
                Text('SubHome')
            ]),
        );
    } 
}

Answered By – LihnNguyen

Answer Checked By – Cary Denson (FlutterFixes Admin)