I have something like a tinder card that Id like to be able to detect if a user taps on the left/right area of the card. Its defined by a sized box, but how can i tell a gesture detector to only use a specific part of the given area?

relevant code, you should be able to ignore everything in the stack but i included it in case there was something i was missing:

return Padding(
                padding: const EdgeInsets.only(top: 10, left: 20, right: 20),
                child: SizedBox(
                  height: MediaQuery.of(context).size.height / 1.4,
                  width: MediaQuery.of(context).size.width,
                  child: GestureDetector(
                    child: Stack(
                      children: [
                        Container(
                          decoration: BoxDecoration(
                              image: DecorationImage(
                                  fit: BoxFit.cover,
                                  image: NetworkImage(
                                      state.stingrays[index]!.imageUrls[0])),
                              borderRadius: BorderRadius.circular(5.0),
                              boxShadow: [
                                BoxShadow(
                                  color: Colors.grey.withOpacity(0.5),
                                  spreadRadius: 4,
                                  blurRadius: 4,
                                  offset: Offset(3, 3),
                                )
                              ]),
                        ),
                        Container(
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(5.0),
                            gradient: LinearGradient(
                              colors: [
                                Color.fromARGB(200, 0, 0, 0),
                                Color.fromARGB(0, 0, 0, 0),
                              ],
                              begin: Alignment.bottomCenter,
                              end: Alignment.topCenter,
                            ),
                          ),
                        ),
                        Positioned(
                          bottom: 30,
                          left: 20,
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text(
                                '${state.stingrays[index]!.name}, ${state.stingrays[index]!.age}',
                                style: Theme.of(context)
                                    .textTheme
                                    .headline2!
                                    .copyWith(
                                      color: Colors.white,
                                    ),
                              ),
                              Text(
                                '${state.stingrays[index]!.jobTitle}',
                                style: Theme.of(context)
                                    .textTheme
                                    .headline3!
                                    .copyWith(
                                      color: Colors.white,
                                      fontWeight: FontWeight.normal,
                                    ),
                              ),
                              Row(
                                children: [
                                  Container(
                                    width: 35,
                                    height: 35,
                                    decoration: BoxDecoration(
                                      shape: BoxShape.circle,
                                      color: Colors.white,
                                    ),
                                    child: Icon(Icons.info_outline,
                                        size: 25,
                                        color: Theme.of(context).primaryColor),
                                  )
                                ],
                              )
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              );

Thanks!

CodePudding user response：

I am assuming that the card is placed in the center. Then you can get the coordinates with the following

Add this

onTapDown: (details) {

        var position = details.globalPosition;
//Here it's checking if the click position is less than half of screen or more
        if (position.dx < MediaQuery.of(context).size.width / 2){
          print(" tapped left side");
        } else {
           print{"tapped right size");
        }
      },

CodePudding user response：

While Kaushik had a good suggestion, for my case I ended up doing the following:

GestureDetector(
                            child: LayoutBuilder(builder: (ctx, constraints) {
                          return Align(
                            alignment: Alignment.centerRight,
                            child: Opacity(
                              opacity: 0.0,
                              child: Container(
                                color: Colors.black,
                                height: constraints.maxHeight,
                                width: constraints.maxWidth * 0.3,
                              ),
                            ),
                          );
                        }), onTap: () {
                          Provider.of<StingrayBloc>(context, listen: false).add(
                              IncrementImageUrlIndex(
                                  imageUrlIndex: state.imageUrlIndexes[index],
                                  stingrayIndex: index));
                          print(state.imageUrlIndexes[index]);
                        }),