How to change tab programmatically on BottomAppBar flutter?

Question

I am working on a flutter application where I need to change my tab programmatically, here If I came on the last screen of the stack then I need to redirect to the first tab programmatically instead of closing the app.

Please consider the following code snnipet:

final PageStorageBucket bucket = PageStorageBucket();

Widget currentScreen = HomeFragment();

Widget build(BuildContext context) {
return Scaffold(
  backgroundColor: Color(0xFFF3F5F9),
  body: PageStorage(
    child: currentScreen,
    bucket: bucket,
  ),
  bottomNavigationBar: BottomAppBar(
    shape: CircularNotchedRectangle(),
    child: Container(
      width: double.infinity,
      height: 15.5,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          GestureDetector(
            onTap: () {
              setState(() {
                currentScreen = HomeFragment();
                currentTab = 0;
              });
            },
            child: Expanded(
              child: Container(
                height: 15.5,
                color: Colors.white,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Image.asset(
                      'assets/home.png',
                      color: currentTab == 0 ? Color(0xFF193F70) : Color(0xFFABAAAA),
                    ),
                    SizedBox(
                      height: 3.0,
                    ),
                    Text(
                      'Home',
                    ),
                  ],
                ),
              ),
            ),
          ),
          GestureDetector(
            onTap: () {
              setState(() {
                redirectToLogin();
              });
            },
            child: Expanded(
              child: Container(
                height: 15.5,
                color: Colors.white,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Image.asset(
                      'assets/login_icon.png',
                      color: currentTab == 1 ? Color(0xFF193F70) : Color(0xFFABAAAA),
                    ),
                    SizedBox(
                      height: 3.0,
                    ),
                    Text(
                      'Login',
                    ),
                  ],
                ),
              ),
            ),
          ),
          GestureDetector(
            onTap: () {
              setState(() {
                redirectToSignUp();
              });
            },
            child: Expanded(
              child: Container(
                height: 15.5,
                color: Colors.white,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Image.asset(
                      'assets/signup_icon.png',
                      color: currentTab == 2 ? Color(0xFF193F70) : Color(0xFFABAAAA),
                    ),
                    SizedBox(
                      height: 3.0,
                    ),
                    Text(
                      'SignUp',
                    ),
                  ],
                ),
              ),
            ),
          ),
          GestureDetector(
            onTap: () {
              setState(() {
                currentScreen = ProfileFrag();
                currentTab = 3;
              });
            },
            child: Expanded(
              child: Container(
                height: 15.5,
                color: Colors.white,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Image.asset(
                      'assets/menu_icon.png',
                      color: currentTab == 3 ? Color(0xFF193F70) : Color(0xFFABAAAA),
                    ),
                    SizedBox(
                      height: 3.0,
                    ),
                    Text(
                      'Menu',
                    ),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    ),
  ),
);}

Here I am looking for something that can redirect to a different tab programmatically. Also please let me know if I am doing something wrong here.

Answer 1

I believe it would be better to use a real Flutter TabBar. Have you considered this solution? There is a complete tutorial on this blog : https://blog.logrocket.com/flutter-tabbar-a-complete-tutorial-with-examples/ It includes a way to change tabs programmatically. This is actually what I am trying to do with my own app. Let me know if this could work for you.