AnswerBun.com

Aumentar tamanho do GestureDetector Flutter

Stack Overflow em Português Asked by Jeff Henrique on January 6, 2022

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

inserir a descrição da imagem aqui

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:

inserir a descrição da imagem aqui

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,
            ),
          );
  }
}

One 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.

Answered by Naslausky on January 6, 2022

Add your own answers!

Related Questions

Angular NG-FOR e NG-IF

1  Asked on October 21, 2020 by leonardo-vinicius

       

Gostaria de fazer uma consulta relacional com sequelize do tipo right join

0  Asked on October 20, 2020 by fabrcio-pinheiro-dos-santos

       

Persistir objeto em CRUD JSF + CDI + JPA

1  Asked on October 14, 2020 by gleison

         

CSS: Posicionamento header e body

1  Asked on October 9, 2020 by andr-machoski

         

Soma de 3 matrizes em uma nova matriz

2  Asked on October 8, 2020 by boltju

   

Como faço para retornar para “double” do df original?

2  Asked on October 7, 2020 by thaissa

   

Git fazer comits de código instavel é má prática?

2  Asked on October 3, 2020 by andre

 

Scanner não funcionando

1  Asked on September 28, 2020 by joo-vtor

     

Retorno Valor ID C# NpgsqlCommand

2  Asked on September 24, 2020 by himorrivel

     

Como alinhar corretamente uma galeria de itens com flexbox?

1  Asked on September 23, 2020 by ivan-ferrer

     

Recarregar Node_Modules no Angular

0  Asked on September 22, 2020 by bruno-maciel

         

Faixa de números aleatórios em C

3  Asked on September 21, 2020 by joo-iora

   

fadeToggle() não funciona corretamente

0  Asked on September 21, 2020 by igor

         

Problema com Datatables em Laravel 5.2

1  Asked on September 13, 2020 by ramonvicente

   

Ask a Question

Get help from others!

© 2023 AnswerBun.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP