Aumentar tamanho do GestureDetector Flutter

Question

Olá, tenho um GestureDetectorque recebe como filho um container com width: 20 e heigth: 20 e com isso meu GestureDetector fica apenas 20x20, como mostra a imagem (o tamanho é só a bolinha cinza)

Ok, preciso aumentar a area do GestureDetector pensei em passar um Container como filho e deixar cor transparente, e como filho do container a minha "bolinha cinza (que é um container também)", mas não deu certo, ficou assim:

Enfim, preciso de uma maneira pra aumentar apenas o local clicavel e não o container da bolinha cinza, como posso fazer? meu código está abaixo
GestureDetector(
                  child: Online(
                      online: lista[index].online, width: 20, heigth: 20),
                  onTap: () {
                    _alterarStatusFun(lista[index]);
                  }),

O online eu criei como classe pois uso em outros lugares :
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,
            ),
          );
  }
}

Naslausky · Answer

Englobe o widget Online em um padding com o valor da "margem clicável" que você deseja:
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]);
                  })),

Isso irá fazer o GestureDetector envolver não apenas o container, como todo o padding em torno dele.
Porém, como o Padding não desenha nada na tela, o seguinte comportamento, que é descrito na documentação, irá ocorrer:

By default a GestureDetector with an invisible child ignores touches; this behavior can be controlled with behavior.

Tradução livre: Caso o child seja invisível ele terá os cliques ignorados. Esse comportamento pode ser modificado pela property behavior.
Portanto, para corrigir isso, use nesta property o valor 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]);
                  })),

O valor dos valores do enum HitTestBehavior podem ser conferidos na documentação.

Aumentar tamanho do GestureDetector Flutter

One Answer

Add your own answers!

Ask a Question