Question 197362 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – GestureDetector not working when taping on container

I have created a custom NavBar in flutter but the GestureDetector is not working so I am stuck on one single page.

Below is the code.

class SearchPage extends StatefulWidget {
  const SearchPage({super.key});

  @override
  State<SearchPage> createState() => _SearchPageState();
}

class _SearchPageState extends State<SearchPage> {
  @override
  Widget build(BuildContext context) {
    bool _isMapsSelected = true;

    // return const SearchPageTab();
    return Scaffold(
      extendBodyBehindAppBar: true,
      backgroundColor: Colors.grey,
      appBar: AppBar(
        elevation: 0,
        backgroundColor: Colors.transparent,
        title: ClipRRect(
            borderRadius: const BorderRadius.only(
                topLeft: Radius.circular(FizzinConstants.radius),
                topRight: Radius.circular(FizzinConstants.radius)),
            child: BackdropFilter(
                filter: ImageFilter.blur(
                  sigmaX: 15.0,
                  sigmaY: 25.0,
                ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: [
                    GestureDetector(
                      behavior: HitTestBehavior.translucent,
                      onTap: () => {
                        setState(() {
                          _isMapsSelected = true;
                        })
                      },
                      child: Container(
                        padding: const EdgeInsets.all(10),
                        decoration: BoxDecoration(
                          borderRadius:
                              BorderRadius.circular(FizzinConstants.radius),
                          color: _isMapsSelected
                              ? FizzinColors.cVividBlue
                              : Colors.transparent,
                        ),
                        child: Text(
                          'Maps',
                          style: _isMapsSelected
                              ? const TextStyle(
                                  color: Colors.white,
                                  fontSize: 16,
                                  fontWeight: FontWeight.bold)
                              : const TextStyle(
                                  color: FizzinColors.cDarkGrey,
                                  fontSize: 14,
                                  fontWeight: FontWeight.bold),
                        ),
                      ),
                    ),
                    GestureDetector(
                        behavior: HitTestBehavior.translucent,
                        onTap: () => {
                              setState(() {
                                _isMapsSelected = false;
                              })
                            },
                        child: Container(
                          padding: const EdgeInsets.all(10),
                          decoration: BoxDecoration(
                            borderRadius:
                                BorderRadius.circular(FizzinConstants.radius),
                            color: _isMapsSelected
                                ? Colors.transparent
                                : FizzinColors.cVividBlue,
                          ),
                          child: Text(
                            'Discover',
                            style: _isMapsSelected
                                ? const TextStyle(
                                    color: FizzinColors.cDarkGrey,
                                    fontSize: 14,
                                    fontWeight: FontWeight.bold)
                                : const TextStyle(
                                    color: Colors.white,
                                    fontSize: 16,
                                    fontWeight: FontWeight.bold),
                          ),
                        )),
                  ],
                ))),
      ),
      body: _isMapsSelected ? const MapContentTab() : const SearchContentTab(),
    );
  }
}

A tried the AbsorbPointer function but it’s not working, What ever I am trying the top on Discover text is never catch

Any idea why >

Tags:

2

Answers


  1. 0

    Try this :

    return Scaffold(
      extendBodyBehindAppBar: true,
      backgroundColor: Colors.grey,
      appBar: AppBar(
        elevation: 0,
        backgroundColor: Colors.transparent,
        title: ClipRRect(
            borderRadius: const BorderRadius.only(
                topLeft: Radius.circular(FizzinConstants.radius),
                topRight: Radius.circular(FizzinConstants.radius)),
            child: BackdropFilter(
                filter: ImageFilter.blur(
                  sigmaX: 15.0,
                  sigmaY: 25.0,
                ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: [
                    InkWell(
                      onTap: (){
                        setState(() {
                          _isMapsSelected = true;
                        });
                      },
                      child: IgnorePointer(
                        child: Container(
                          padding: const EdgeInsets.all(10),
                          decoration: BoxDecoration(
                            borderRadius:
                            BorderRadius.circular(FizzinConstants.radius),
                            color: _isMapsSelected
                                ? FizzinColors.cVividBlue
                                : Colors.transparent,
                          ),
                          child: Text(
                            'Maps',
                            style: _isMapsSelected
                                ? const TextStyle(
                                color: Colors.white,
                                fontSize: 16,
                                fontWeight: FontWeight.bold)
                                : const TextStyle(
                                color: FizzinColors.cDarkGrey,
                                fontSize: 14,
                                fontWeight: FontWeight.bold),
                          ),
                        ),
                      ),
                    ),
                    InkWell(
                      onTap: (){
                        setState(() {
                          _isMapsSelected = false;
                        });  
                      },
                      child: IgnorePointer(
                        child: Container(
                          padding: const EdgeInsets.all(10),
                          decoration: BoxDecoration(
                            borderRadius:
                            BorderRadius.circular(FizzinConstants.radius),
                            color: _isMapsSelected
                                ? Colors.transparent
                                : FizzinColors.cVividBlue,
                          ),
                          child: Text(
                            'Discover',
                            style: _isMapsSelected
                                ? const TextStyle(
                                color: FizzinColors.cDarkGrey,
                                fontSize: 14,
                                fontWeight: FontWeight.bold)
                                : const TextStyle(
                                color: Colors.white,
                                fontSize: 16,
                                fontWeight: FontWeight.bold),
                          ),
                        ),
                      ),
                    ),
                  ],
                ))),
      ),
      body: _isMapsSelected ? const MapContentTab() : const SearchContentTab(),
    );
    Login or Signup to reply.
  2. 0

    You can give behavior to the GestureDetector as ‘translucent’, then it will take taps in the full size of the GestureDetector.

    behavior: HitTestBehavior.translucent

    And if it don’t solve the issue you can try replacing the GestureDetector with Inkwell both are same, just inkwell is little better.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search