How to navigate to one of the pages of BottomNavigationBar by clicking on a button present in the page in Flutter?

Question

I have a bottom navigation bar in my flutter app which is used to show different pages. I need to click on a button in one of the pages to navigate to another which can also be navigated through the bottom navigation bar. To keep the state of the page i have used IndexedStack widget. also i highlight which page i am currently at. How to do so. Here is the code.

class IndexPage extends StatefulWidget {
  @override
  _IndexPageState createState() => _IndexPageState();
}

class _IndexPageState extends State<IndexPage>
    with SingleTickerProviderStateMixin {
  final ValueNotifier<int> pageNumberNotifier = ValueNotifier<int>(0);

  final List<Widget> _widgets = <Widget>[
    Page1(),
    Page2(),
    Page3(),

  ];

  @override
  void dispose() {
    super.dispose();
    pageNumberNotifier.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return ValueListenableBuilder(
        valueListenable: pageNumberNotifier,
        builder: (BuildContext context, int pageNumber, Widget child) {
          return SafeArea(
            child: Scaffold(
              body: IndexedStack(
                index: pageNumberNotifier.value,
                children: _widgets,
              ),
              bottomNavigationBar: BottomNavigationBar(
                showUnselectedLabels: true,
                currentIndex: pageNumber,
                onTap: (index) => pageNumberNotifier.value = index,
                items: <BottomNavigationBarItem>[
                  bottomNavigationBarItem(
                      iconString: 'page1', index: 0, title: 'Page1'),
                  bottomNavigationBarItem(
                      iconString: 'page2', index: 1, title: 'Page2'),
                  bottomNavigationBarItem(
                      iconString: 'page3', index: 2, title: 'Page3'),
          
                ],
              ),
            ),
          );
        });
  }

  BottomNavigationBarItem bottomNavigationBarItem(
      {String iconString, int index, String title}) {
    
       //shows the icons and also highlights the icon of the current page based on the current index.
  }
}

Here is the page that contains the button

class Page1 extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
   ...
   onTap(){
    // go to Page3 and also highlight Page3 icon in the bottom navigation bar
    }    
   ...
   }
}

Answer 1

Use a GlobalKey

GlobalKey<_IndexPageState> key = GlobalKey();

make a function inside _IndexPageState:

void setPage(int page) {
    pageNumberNotifier.value = page;
}

call this method from anywhere with:

key.currentState.setPage(0);