GestureDetector not working when taping on container

Question

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 >

Answer 1

I got it, you are making the variable in the build method itself so when state change it will have true every time.

you just need to place this bool _isMapSelected = true outside the build method

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

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

class _SearchPageState extends State<SearchPage> {
  bool _isMapsSelected = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // your code will be here as it is.
    );
  }
}