How to navigate to bottom tab bar view from button in flutter (or how to make tab controller global)-CodePudding

I have a flutter app with a bottom navigation tab var and I'd like to click a button in the first tab bar view that would navigate me to another tab view. Here is how my bottom tab bar view is setup:

late TabController _bottomTabController;    
return Material(
          child: SafeArea(
            child: Scaffold(
              backgroundColor: Colors.grey.shade100,
              appBar: HomePageBanner(title: appBarTitle),
              body: TabBarView(
                children: const <Widget>[
                  ExploreNavigation(),
                  ChatRequestNavigation(),
                  LiveRoomsNavigation(),
                  MessageNavigationApi(),
                  ProfilePage(sourceType: SourceType.explore,),
                ],
                controller: _bottomTabController,
              ),
              bottomNavigationBar: Container(
                decoration: BoxDecoration(
                  border: Border.all(
                    color: Colors.grey.shade400,
                  ),
                ),
                child: Container(
                  padding: const EdgeInsets.all(5.0),
                  color: Colors.white,
                  child: Padding(
                    padding: const EdgeInsets.only(bottom: 8.0),
                    child: TabBar(
                      labelColor: Colors.purpleAccent,
                      unselectedLabelColor: Colors.grey,
                      labelStyle: const TextStyle(fontSize: 8.0),
                      labelPadding: const EdgeInsets.only(left: 0, right: 0),
                      indicator: const UnderlineTabIndicator( // remove underline
                        borderSide: BorderSide(color: Colors.white, width: 0.0),
                        insets: EdgeInsets.fromLTRB(50.0, 0.0, 50.0, 70.0),
                      ),
                      tabs: <Widget>[
                        Tab(
                          icon: const ImageIcon(
                            AssetImage("assets/images/explore_icon.png"),
                          ),
                          text: loc.exploreTitle,
                        ),
                        Tab(
                          icon: StreamBuilder<QuerySnapshot>(
                            stream: chatRequestsStream,
                            builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
                              int requestsNumber = 0;
                              if (snapshot.hasData) {
                                requestsNumber = snapshot.data!.docs.length;
                              }
                              return BadgedIcon(
                                badgeValue: requestsNumber,
                                icon: const ImageIcon(AssetImage("assets/images/chat_request_icon_grey.png"),),);
                            },
                          ),
                          text: loc.chatRequestsTitle,
                        ),
                        Tab(
                          icon: const ImageIcon(
                            AssetImage("assets/images/live_rooms_icon.png"),
                          ),
                          text: loc.liveRoomsTitle,
                        ),
                        Tab(
                          icon: StreamBuilder<int>(
                            stream: client.state.unreadChannelsStream,
                            builder: (BuildContext context, AsyncSnapshot<int> snapshot) {
                              return BadgedIcon(
                                badgeValue: snapshot.data ?? 0,
                                icon: const ImageIcon(AssetImage("assets/images/messages_icon.png"),),
                              );
                            }
                          ),
                          text: loc.messagesTitle,
                        ),
                        Tab(
                          icon: const ImageIcon(
                            AssetImage("assets/images/profile_icon.png"),
                          ),
                          text: loc.profileTitle,
                        ),
                      ],
                      controller: _bottomTabController,
                    ),
                  ),
                ),
              ),
            ),
          ),
        );

And this button is in a card in the page i would like to navigate from, which is different from the page above. in this page i would like to click a button and go to the fifth bottom tab:

CustomElevatedButton(
              bgColor: Colors.blue.shade900,
              textColor: Colors.white,
              borderColor: Colors.purpleAccent,
              onPressed: () {
                //Navigate to fifth tab
              },
              text: "Go to Profile",
            ),

Please how do I go about navigating to the bottom fifth tab from this button? How do I access the tabcontroller from the other page? without having to pass it in the constructor

CodePudding user response：

In onPressed use the following code:

 onPressed:(){
//you can use jumToPage or animateTo as well depending on your choice
_bottomTabController.jumToPage(//your index here);
}

CodePudding user response：

You can change tab navigation using "currentIndex" key.

Example, if you want to navigate on first tab then set

currentIndex = 0;

If you want to navigate on Second tab then set value

currentIndex = 1;

Above is the just Example, you have use in code base on your structure. Let me know If need further help, I'm happy to help you.