Increase the size of the Flutter Gesturedetector

Question

Hi, I have a GestureDetectorwho receives as his son a container with width: 20 and heigth: 20 and with that my Gesturedetector is only 20x20, as shown in the image (the size is only the gray ball)

Okay, I need to increase the area of GestureDetector I thought about passing a container as a child and leaving transparent color, and as the container’s son my "gray ball (which is a container too)", but it didn’t work, it was like this:

Anyway, I need a way to increase only the clickable location and not the gray ball container, how can I do it? my code is below

GestureDetector(
                  child: Online(
                      online: lista[index].online, width: 20, heigth: 20),
                  onTap: () {
                    _alterarStatusFun(lista[index]);
                  }),

The online I created as a class because I use elsewhere :

class Online extends StatelessWidget {
  final bool online;
  final double width;
  final double heigth;
  const Online({Key key, this.online, this.width, this.heigth})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return online
        ? Container(
            width: width,
            height: heigth,
            decoration: BoxDecoration(
              color: Color.fromRGBO(0, 255, 0, 1),
              shape: BoxShape.circle,
            ),
          )
        : Container(
            width: width,
            height: heigth,
            decoration: BoxDecoration(
              color: Colors.grey,
              shape: BoxShape.circle,
            ),
          );
  }
}

Answer 1

Englobe the widget Online in a padding with the value of the "clickable margin" you want:

double margemClicavel = 50.0;
GestureDetector(
                  child: Padding(
                    padding: EdgeInsets.all(margemClicavel),
                    child: Online(
                      online: lista[index].online, width: 20, heigth: 20),
                      onTap: () {
                        _alterarStatusFun(lista[index]);
                  })),

This will make the Gesturedetector involve not only the container, but all the padding around it. However, as the Padding does not draw anything on the screen, the following behavior, which is described in the documentation, will occur:

By default a Gesturedetector with an Invisible Child ignores touches; this behavior can be Controlled with behavior.

Free translation: Case o child is invisible it will have the ignored clicks. This behavior can be modified by Property behavior.

Therefore, to fix this, use this value HitTestBehavior.opaque:

double margemClicavel = 50.0;
GestureDetector(
                  behavior: HitTestBehavior.opaque,
                  child: Padding(
                    padding: EdgeInsets.all(margemClicavel),
                    child: Online(
                      online: lista[index].online, width: 20, heigth: 20),
                      onTap: () {
                        _alterarStatusFun(lista[index]);
                  })),

The value of Enum values HitTestBehavior may be conferred on the documentation.