Widgets interativos no Flutter

Tempo de leitura: 2 minutes

Aqui uma lista de Widgets com Interação.

Um widget que detecta gestos.
Tenta reconhecer gestos que correspondem a seus retornos de chamada não nulos.
Se este widget tiver um filho, ele adiará esse filho para seu comportamento de dimensionamento. Se não tiver um filho, ele cresce para caber no pai.

GestureDetector(
  onTap: () {
    setState(() {

    });
  },
  child: Container(
    
  ),
),

 

Um widget que absorve ponteiros durante o teste de clique.
Quando a absorção é verdadeira, esse widget impede que sua subárvore receba eventos de ponteiro encerrando o teste de ocorrência em si mesmo. Ele ainda consome espaço durante o layout e pinta seu filho como de costume. Ele apenas evita que seus filhos sejam alvo de eventos localizados, pois retorna true de RenderBox.hitTest.

SizedBox(
  width: 100.0,
  height: 200.0,
  child: AbsorbPointer(
    child: ElevatedButton(
      style: ElevatedButton.styleFrom(
        backgroundColor: Colors.blue.shade200,
      ),
      onPressed: () {},
      child: null,
    ),
  ),
),

 

Um widget invisível durante o teste de clique.

Quando ignorar é verdadeiro, esse widget (e sua subárvore) fica invisível para o teste de clique. Ele ainda consome espaço durante o layout e pinta seu filho como de costume. Só não pode ser alvo de eventos localizados, pois retorna false de RenderBox.hitTest.

Quando ignorarSemantics for verdadeiro, a subárvore ficará invisível para a camada de semântica (e, portanto, por exemplo, ferramentas de acessibilidade). Se ignorarSemantics for nulo, ele usará o valor de ignorar.

IgnorePointer(
  ignoring: ignoring,
  child: Column(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: <Widget>[
      Text('Ignoring: $ignoring'),
      ElevatedButton(
        onPressed: () {},
        child: const Text('Click me!'),
      ),
    ],
  ),
),

 

Por padrão, InteractiveViewer recorta seu filho usando Clip.hardEdge. Para evitar esse comportamento, considere definir clipBehavior como Clip.none. Quando clipBehavior é Clip.none, InteractiveViewer pode desenhar fora de sua área original da tela, como quando uma criança é ampliada e aumenta de tamanho. No entanto, não receberá gestos fora de sua área original. Para evitar áreas mortas onde InteractiveViewer não recebe gestos, não defina clipBehavior ou certifique-se de que o widget InteractiveViewer tenha o tamanho da área que deve ser interativa.

O filho não deve ser nulo.

Veja também:

  • A demonstração de transformações da Flutter Gallery, que inclui o uso do InteractiveViewer.
  • A demonstração flutter-go, que inclui um posicionamento robusto de um filho do InteractiveViewer que funciona para todos os tamanhos de tela e filhos.
  • A sessão de desempenho do Lazy Flutter, que inclui o uso de um InteractiveViewer para visualizar subconjuntos de um grande conjunto de widgets com desempenho usando o construtor builder.
InteractiveViewer(
   boundaryMargin: const EdgeInsets.all(20.0),
   minScale: 0.1,
   maxScale: 1.6,
   child: Container(
     decoration: const BoxDecoration(
       gradient: LinearGradient(
         begin: Alignment.topCenter,
         end: Alignment.bottomCenter,
         colors: <Color>[Colors.orange, Colors.red],
         stops: <double>[0.0, 1.0],
       ),
     ),
   ),
 ),

 

Uma área retangular de um Material que responde ao toque.

Para obter uma variante desse widget que não corta salpicos, consulte InkResponse.

InkWell(
  onTap: () {
    setState(() {

    });
  },
),