I need to call a function when a tab is pressed in the tabbar, but the tab does not reac anymore, even with an Inkwell. I also wrapped the position an the tab widget itself in an Gesturedetector or an inkwell, what iam doing wrong?

TabBar(
        indicatorColor: Colors.white,
        tabs: [
        GestureDetector(//That does not work even with an InWell
          onTap: ()async{
            await _dbLogin.function();
          },
          child:  Stack(
        children: [
          Positioned(
          left: 40,
          child: const Tab(icon: Icon(Icons.person_outline,color: Colors.lightGreen,size: 30,))
          ),
          currentUser?.priceAlert==true?
          Positioned(
            bottom: 20,
            left: 40,
            child: const CircleAvatar(
              radius: 4.0,
              backgroundColor: Colors.red,
            ),
          ):Container() 
        ],
        ),
        ),
        Stack(
          children: [
            Positioned(
              left: 40,
              child: const Tab(icon: Icon(Icons.people_alt_outlined,color: Colors.lightGreen,size: 30,)),
            ),
            currentUser?.productAlert==true?Positioned(
              bottom: 20,
               left: 40,
              child: const CircleAvatar(
                radius: 4.0,
                backgroundColor: Colors.red,
              ),
            ):Container() 
          ],
        ),
        Stack(
          children: [
            Positioned(
              left: 40,
              child: Tab(icon: currentUser?.profilVerified==true?const Icon(Icons.account_circle_outlined,color:Colors.lightGreen,size: 30,):const Icon(Icons.account_circle_outlined,color:Colors.red,size: 30,))
            )
          ],
        )
        ],
      ),

Any ideas? Thank you

CodePudding user response：

The TabBar has built-in functionality to do stuff when a tab is pressed. Just implement

  onTap: (index) {
    //do what you want here
  },

Where index is the index of the tab pressed

CodePudding user response：

Ivo is right, I just make it more specific for you with your desire :

TabBar(
      indicatorColor: Colors.white,
      onTap: (index) async {
        if (index == 0) {
          await _dbLogin.function();
        }
      },
      tabs: [
        Stack(
          children: [
            Positioned(
                left: 40,
                child: const Tab(
                    icon: Icon(
                  Icons.person_outline,
                  color: Colors.lightGreen,
                  size: 30,
                ))),
            currentUser?.priceAlert == true
                ? Positioned(
                    bottom: 20,
                    left: 40,
                    child: const CircleAvatar(
                      radius: 4.0,
                      backgroundColor: Colors.red,
                    ),
                  )
                : Container()
          ],
        ),
        Stack(
          children: [
            Positioned(
              left: 40,
              child: const Tab(
                  icon: Icon(
                Icons.people_alt_outlined,
                color: Colors.lightGreen,
                size: 30,
              )),
            ),
            currentUser?.productAlert == true
                ? Positioned(
                    bottom: 20,
                    left: 40,
                    child: const CircleAvatar(
                      radius: 4.0,
                      backgroundColor: Colors.red,
                    ),
                  )
                : Container()
          ],
        ),
        Stack(
          children: [
            Positioned(
                left: 40,
                child: Tab(
                    icon: currentUser?.profilVerified == true
                        ? const Icon(
                            Icons.account_circle_outlined,
                            color: Colors.lightGreen,
                            size: 30,
                          )
                        : const Icon(
                            Icons.account_circle_outlined,
                            color: Colors.red,
                            size: 30,
                          )))
          ],
        )
      ],
    )