AbsorbPointer en Flutter, qué es y cómo se utiliza

¿Necesitas que un evento click NO se dispare cuando tu usuario pulse sobre un Widget cómo, por ejemplo, un EditText? O quizás esto ya sabes cómo se hace, pero te falta algún detalle para dejarlo todo lo fino que te gustaría ¿verdad?

Mi nombre es Aitor Sánchez, soy desarrollador de apps desde 2014, y en este artículo aprenderás cómo NO disparar un evento cuando tu usuario pulse en un Widget que está envuelto en otro que dispara eventos de manera implícita con Flutter Absorbpointer.

Pero antes de continuar, esta es la Flutter Mafia. Es mi newsletter donde tu vas a aprender a hacer apps y a ganar dinero con ellas junto con otros genietes que ya están dentro. Y si te suscribes te regalo mi ebook "Duplica los ingreso de tus apps en 5 minutos" No es broma, quizás te interese.

Y, ahora si, comenzamos. Let´s go!

 

Pero ¿qué hace AbsorbPointer exactamente?

Pues este Widget, "absorbe" todos los eventos de entrada (como toques o clics) y evita que lleguen a los widgets hijos.

Esto puede ser útil, por ejemplo, si quieres deshabilitar temporalmente un widget o si quieres evitar que un widget reciba eventos de entrada mientras se muestra un diálogo o un menú.

 

Bien, ¿cómo puedo implementarlo en mi app?

Para implementar AbsorbPointer en tu aplicación de Flutter, primero debes agregarlo a tu widget tree. Luego, debes especificar qué widgets deben ser "absorbidos" en los widgets hijos de AbsorbPointer:

...
AbsorbPointer(
  absorbing: true,  // Establece si se deben absorber los eventos de entrada o no
  child: Text('Este texto no puede ser tocado'),
),
...

 

En este ejemplo, el widget Text no podrá recibir eventos de entrada mientras AbsorbPointer esté habilitado. Puedes cambiar el valor de absorbing a false para volver a habilitar los eventos de entrada para los widgets hijos.

 

Cosas adicionales a tener en cuenta

Esta información que listaremos ahora te ahorrará unos cuantos dolores de cabeza:

• AbsorbPointer solo "absorbe" eventos de entrada directamente en sus widgets hijos. Si tienes un widget dentro de AbsorbPointer que tiene widgets hijos, estos últimos todavía podrán recibir eventos de entrada.
• Puedes usar AbsorbPointer junto con el atributo ignoring de otros widgets para tener un control más fino sobre qué widgets reciben eventos de entrada y cuáles no. Por ejemplo:

...
AbsorbPointer(
  absorbing: true,
  child: Column(
    children: [
      Text('Este texto no puede ser tocado'),
      FlatButton(
        onPressed: () {},
        child: Text('Este botón sí puede ser tocado'),
      ),
    ],
  ),
),
...

En este ejemplo, el widget Text no podrá recibir eventos de entrada gracias a AbsorbPointer, pero el widget FlatButton sí podrá recibir eventos de entrada debido a que está fuera del alcance de AbsorbPointer.

• AbsorbPointer es un widget que puede ser útil para evitar la propagación de eventos de entrada a través de tu widget tree. Esto puede ser útil, por ejemplo, si tienes un widget que está "debajo" de otro widget y no quieres que el widget de debajo reciba eventos de entrada mientras el widget de arriba está visible.
• AbsorbPointer no tiene una apariencia visual propia y no ocupa espacio en la pantalla. Esto significa que puedes colocarlo en cualquier parte de tu widget tree sin que se vea.
• AbsorbPointer es un widget "transparente" a nivel de eventos de entrada. Esto significa que, si lo colocas en tu widget tree, no tendrá ningún efecto en la apariencia de tu aplicación, pero sí afectará la forma en que los eventos de entrada son procesados.

 

Propiedades de AbsorbPointer

Ahora vamos a listar las propiedades de este Widget. Pero recuerda, solo las suyas, las heredades se expondrán cuando hablemos de los padres de este componente.

• absorbing: un valor booleano que indica si se deben absorber los eventos de entrada o no. Si estableces este valor en true, todos los eventos de entrada serán absorbidos y no llegarán a los widgets hijos. Si estableces este valor en false, los eventos de entrada se propagarán normalmente a través de los widgets hijos.
• child: el widget hijo de AbsorbPointer. Todos los eventos de entrada que se produzcan en este widget y sus widgets hijos serán absorbidos si absorbing está establecido en true.

 

Métodos y Funciones de AbsorbPointer

AbsorbPointer es un widget en Flutter y, como tal, no tiene métodos propios. En su lugar, AbsorbPointer hereda todos los métodos de sus superclases, como StatelessWidget o SingleChildRenderObjectWidget.

Algunos de los métodos más comunes que puedes encontrar en AbsorbPointer son:

• build: este método es llamado cuando Flutter necesita dibujar el widget en pantalla. En AbsorbPointer, este método simplemente devuelve el widget hijo especificado en la propiedad child.
• createRenderObject: este método es llamado cuando Flutter necesita crear el render object asociado al widget. En el caso de AbsorbPointer, este método crea una instancia de RenderAbsorbPointer.
• debugFillProperties: este método es llamado cuando Flutter necesita mostrar información adicional sobre el widget en el panel de depuración. En el caso de AbsorbPointer, este método muestra la propiedad absorbing.

 

Algo más que quizás te interese

Mira, en el momento que tu mejoras el logo de una app que tengas publicada en Google Play, las descargas y los ingresos que esta aplicación genera aumentan. Esto es así. Mejor logo es igual a más dinero.

Basándonos en esto, hemos creado esta herramienta que te permite evaluar, optimizar y mejorar los logos de tus apps para que reciban más descargas. No te quiero espoilear, dentro hay un video explicativo. Entra en el enlace.

 

Sin nada más que agregar, me despido ya geniete. Espero haberte ayudado con el Absorbpointer y nos vemos en el siguiente artículo. Hasta entonces ¡que te vaya bien!