Flutter – Widget IgnorePointer

IgnorePointer es un widget incorporado en flutter que es similar al widget AbsorbPointer , ambos evitan que el widget de sus hijos tenga eventos de puntero que son grabar, hacer clic, arrastrar, desplazarse y pasar el mouse. Ambos hacen lo mismo de dos maneras diferentes, el widget AbsorbPointer absorbe todos los eventos de puntero, lo que significa que los eventos de puntero terminan por completo y no se pueden pasar a ningún otro lugar. Por otro lado, el widget IgnorePointer simplemente ignora los eventos de puntero sin terminarlo, lo que significa que si hay algún otro elemento debajo del árbol de widgets IgnorePointer , entonces podrá experimentar ese evento de puntero.  

Constructor de la clase IgnorePointer

const IgnorePointer(
{Key key,
bool ignoring: true,
bool ignoringSemantics,
Widget child}
)

Propiedades del widget IgnorePointer: 

• ignorar: esta propiedad toma un booleano como parámetro y decide si ignorar los eventos de puntero o no.
• ignoringSemantics: esta propiedad también toma un booleano como parámetro y controla si los lectores de pantalla y otras funciones deben ignorar o no este widget para obtener la información sobre la aplicación.

Ejemplo: Con la ayuda de un ejemplo veremos cómo implementar el widget IgnorePointer . 

import 'package:flutter/material.dart';
 
void main() {
  runApp(const MyApp());
}
 
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
 
// This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(),
    ); //MaterialApp
  }
}
 
class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);
 
  @override
  // ignore: library_private_types_in_public_api
  _MyHomePageState createState() => _MyHomePageState();
}
 
class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
 
  void _incrementCounter1() {
    setState(() {
      _counter++;
    });
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('GeeksforGeeks'),
        leading: IconButton(
          icon: const Icon(Icons.menu),
          tooltip: 'Menu',
          onPressed: () {},
        ), //IconButton
        backgroundColor: Colors.greenAccent[400],
      ), //AppBar
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ), //Text
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ), //Text
            // RaisedButton is deprecated and will be removed in the next release.
            // We can use ElevatedButton instead.
            ElevatedButton(
              onPressed: _incrementCounter1,
              child: const Icon(Icons.add, color: Colors.white),
            ),
 
            // DEPRECATED
            // RaisedButton(
            // onPressed: _incrementCounter1,
            // color: Colors.cyan,
            // child: Icon(
            // Icons.add,
            // color: Colors.white,
            // ), //Icon
            // ), //RaisedButton
 
            //RaisedButton
          ], //<Widget>[]
        ), //Column
      ), //Center
    ); //Scaffold
  }
}

Producción:

Explicación: Esta es una aplicación flutter simple, al observar el código, podemos ver que hay tres clases declaradas, la primera es MyApp ( StatelessWidget) , que devuelve un MaterialApp . La segunda clase es MyHomePage (StatefulWidget), también se establece como propiedad de inicio en la aplicación. Y la tercera clase es _MyHomePageState que extiende el estado de la clase MyHomePage. Dentro de la clase _MyHomePageState, la aplicación comienza con un Scaffold. Y en la parte superior de la pantalla, tenemos una barra de aplicaciones con el título Texto (‘GeeksforGeeks’). La propiedad principal es tener un IconButtoncon un icono de menú y una información sobre herramientas. Cada vez que pasamos el mouse por encima o mantenemos presionado el IconButton, aparece la información sobre herramientas. En el cuerpo de la aplicación, el widget principal es Center , que contiene un widget Column con la propiedad mainAxisAlignment establecida como Center . A todo esto le sigue el texto (‘Has pulsado el botón tantas veces), el contador y el botón que vemos en pantalla. El texto sobre el botón tiene un estilo de título4 . El botón tiene un color verde azulado y un icono de agregar blanco como elemento secundario. Entonces, cada vez que se presiona el botón, el valor en el contador aumenta en uno, y el _incrementCounter1es la función responsable de eso. Esta aplicación de aleteo es similar a la que tenemos en el artículo AbsorbPoitner , por lo que es más fácil ver la diferencia en la aplicación. 

Ahora, envolveremos el botón Raised en el widget y veremos qué cambios.

  IgnorePointer(
              ignoring: true,
              child: ElevatedButton(
                onPressed: _incrementCounter1,
                child: const Icon(Icons.add, color: Colors.white),
              ),
            ),
            
    // RaisedButton is deprecated
    // Use ElevatedButton instead        

   // RaisedButton wrapped in IgnorePointer
   IgnorePointer(
              ignoring: true,
              child: RaisedButton(
                onPressed: _incrementCounter1,
                color: Colors.cyan,
                child: Icon(
                  Icons.add,
                  color: Colors.white,
                ), //Icon
              ), //RaisedButton
            ), //IgnorePointer

Producción:

Explicación: Aquí, podemos ver que RaisedButton no se puede presionar ahora, ya que ignorar el puntero es ignorar todos los eventos de puntero. Este es un comportamiento similar al que obtendríamos del AbsorbPointer.

Ahora, para ver en qué se diferencia IgnorePointer de AbsorbPointer , pondremos otro RaisedButton encima del botón ya presente.

      //Stacked Green RaisedButton on top of Teal RaisedButton
         Stack(
          children: <Widget>[
           // RaisedButton is deprecaptd and should not be used
                // Use ElevatedButton instead
               RaisedButton(
              onPressed: _incrementCounter1,
              color: Colors.cyan,
              child: Icon(
                Icons.add,
                color: Colors.white,
              ), //Icon
            ), //RaisedButton
            RaisedButton(
              onPressed: _incrementCounter1,
              color: Colors.green,
              child: Icon(
                Icons.add,
                color: Colors.white,
              ), //Icon
            ), //RaisedButton
          ], //<Widget>[]
          //Raisedutton
        ) //Stack

Producción:

Explicación: Aquí, hemos apilado un widget RaisedButton con color verde encima del widget RaisedButton verde azulado ya presente usando Stack Widget . Y podemos ver que el contador funciona bien, ya que cada vez que se presiona el botón, el número aumenta en una cuenta de uno. El botón verde también utiliza la misma función que el botón verde azulado.

Ahora, envolveremos el botón verde con el widget IgnorePointer

    //Wrapped Second Raised Button with IgnorePointer
           Stack(            
              children: <Widget>[
              
              // RaisedButton is deprecaptd and should not be used
                // Use ElevatedButton instead
                RaisedButton(
                  onPressed: _incrementCounter1,
                  color: Colors.cyan,
                  child: Icon(
                    Icons.add,
                    color: Colors.white,
                  ), //Icon
                ), //RaisedButton
                IgnorePointer(
                  ignoring: true,
                  ignoringSemantics: true,
                  child: RaisedButton(
                    onPressed: _incrementCounter1,
                    color: Colors.green,
                    child: Icon(
                      Icons.add,
                      color: Colors.white,
                    ), //Icon
                  ), //RaisedButton
                ), //IgnorePointer
              ], //<Widget>[]
              //Raisedutton
            ) //Stack

Producción:

Explicación:  en esta aplicación, el RaisedButton verde está en la parte superior del RaisedButton verde azulado y está envuelto con el widget IgnorePointer . En el ejemplo anterior, hemos visto que cuando aplicamos el widget IgnorePointer a un solo RaisedButton , dejó de responder a los eventos de puntero. Pero aquí podemos ver claramente que el contador sigue funcionando, y la razón detrás de esto es que IgnorePointer simplemente hace que sus widgets secundarios ignoren los eventos de puntero sin terminarlos, a diferencia de AbsorbPointer, que finaliza los eventos de puntero. Lo que significa es que el evento de puntero se puede pasar a otro widget o árbol de widgets que se apila debajo de él.

Así es como se puede implementar IgnorePointer en flutter. Además, lea el artículo de AbsorbPointer para obtener más información.