Change bottom navigation current index and update setState() from another screen class

Question

Here is my bottom_bar screen. I want to change the bottom navigation menu from another screen button click. How can I resolve this problem?. is there any option that can navigate bottom_navigation from another class. I didn't get any accurate answers through search. [N.B: I am totally new in flutter. Please forgive me if there is any type of misconception ]

  @override
  Widget build(BuildContext context) {
    final themeNotifier = Provider.of<ThemeNotifier>(context);
    return  Scaffold(
          key: _scaffoldKey,
          appBar: AppBar(
            title: const Text('JoyList'),
            leading: IconButton(
              icon:  Image( image: new AssetImage("images/Logo.png"),
                width:  200,
                height: 200,
                color: null,
                fit: BoxFit.scaleDown,
                alignment: Alignment.center,
              ),
              tooltip: 'Show Snackbar',
              onPressed: () {
                // scaffoldKey.currentState.showSnackBar(snackBar);
              },
            ),
            actions: <Widget>[
              IconButton(
                icon: const ImageIcon( AssetImage("images/ic_notification_default.png")),
                tooltip: 'Show Snackbar',
                onPressed: () {
                  // scaffoldKey.currentState.showSnackBar(snackBar);
                },
              ),
              FutureBuilder(
                  future: _apiProvider.getUserImageUrl(),
                  builder: (context, AsyncSnapshot<String> projectSnap) {
                    if(projectSnap.hasData){
                      var url = projectSnap.data;
                      return   IconButton(
                        icon: Center(
                          child: new Container(
                            width: 30,
                            height: 30,
                            decoration: new BoxDecoration(
                                shape: BoxShape.circle,
                                image: new DecorationImage(
                                    fit: BoxFit.cover,
                                    image: new NetworkImage(
                                        '$url'
                                    )
                                )
                            ),
                          ),
                        ),
                        onPressed: _modalBottomSheetMenu,

                      );
                    }else{
                      return Text("Nil");
                    }

                  }
              )
            ],
          ),
          body: CustomNavigator(
            navigatorKey: navigatorKey,
            home: Center(
              child: _widgetOptions.elementAt(selectedIndex),
            ),
            //Specify your page route [PageRoutes.materialPageRoute] or [PageRoutes.cupertinoPageRoute]
            pageRoute: PageRoutes.cupertinoPageRoute,
          ),
          bottomNavigationBar: new Theme(
            data: Theme.of(context).copyWith(
              // sets the background color of the `BottomNavigationBar`
                canvasColor: Theme.of(context).bottomAppBarColor,
                // sets the active color of the `BottomNavigationBar` if `Brightness` is light
                textTheme: Theme
                    .of(context)
                    .textTheme
                    .copyWith(caption: new TextStyle(color: Colors.yellow))),
         // sets the inactive color of the `BottomNavigationBar`
            child: new BottomNavigationBar(
              type: BottomNavigationBarType.fixed,
              currentIndex: selectedIndex,
              items: [
                BottomNavigationBarItem(
                  icon: selectedIndex==0? new ImageIcon( AssetImage('images/ic_home_selected.png')):new ImageIcon( AssetImage('images/ic_home_default.png')),
                  title: Text(''),
                ),
                BottomNavigationBarItem(
                  icon: selectedIndex==1? new ImageIcon( AssetImage('images/ic_list_selected.png')):new ImageIcon( AssetImage('images/ic_list_default.png')),
                  title: Text(''),
                ),
                BottomNavigationBarItem(
                  icon: ImageIcon( AssetImage("images/ic_additems.png")),
                  title: Text(''),
                ),
                BottomNavigationBarItem(
                  icon: ImageIcon( AssetImage("images/ic_search.png")),
                  title: Text(''),
                ),
                BottomNavigationBarItem(
                  icon: selectedIndex==4? new ImageIcon( AssetImage('images/ic_notification_selected.png')):new ImageIcon( AssetImage('images/ic_notification_default.png')),
                  title: Text(''),
                ),
                BottomNavigationBarItem(
                  //  icon: ImageIcon( AssetImage("images/ic_friends_selected.png")),
                  icon: ImageIcon( AssetImage("images/ic_friends_selected.png")),
                  title: Text(''),
                ),
              ],

              showSelectedLabels: false,
              unselectedItemColor: Theme.of(context).iconTheme.color,
              showUnselectedLabels: false,
              selectedItemColor: HexColor("1CD0A8"),
              onTap: _onItemTapped,
            ),
          )
      );

  }

I want to change bottom bar selected index from another screen from here on Tap.

child:   GestureDetector(
                    child: FutureBuilder(
                        future: _getUser(),
                        builder: (context, AsyncSnapshot<dynamic> projectSnap) {
                          if(projectSnap.hasData){
                            user = projectSnap.data;
                            var url = getProfileImageBaseUrl()+ user.profilePicture;
                            return  Column(
                              children: <Widget>[
                                Container(
                                  width: 170,
                                  height: 170,
                                  decoration: new BoxDecoration(
                                      color: Theme.of(context).cardColor,
                                      shape: BoxShape.circle,
                                      image: new DecorationImage(
                                          fit: BoxFit.cover,
                                          image: new NetworkImage(
                                              '$url'
                                          )
                                      )
                                  ),
                                ),
                                Center(
                                  child: Padding(
                                    padding: EdgeInsets.all(8.0),

                                    child: Text(user.fullName+"'s List",style: TextStyle(
                                        color: Theme.of(context).textTheme.caption.color,
                                        fontSize: 26
                                    ),),
                                  ),
                                )

                              ],
                            );
                          }else{
                            return Text("Nil");
                          }

                        }
                    ),
                    onTap: (){
                      print("On tap called");

                      Navigator.of(context)
                          .push(MaterialPageRoute(builder: (context) => FriendsPage()));
                    },
                  )

Answer 1

You can use MobX for this, You need to wrap your BottomNavigationBar with Observer and also declare your selectedIndex in MobX store.

Once you have selectedIndex in your MobX store you can access it from anywere in app using Provider.