Flutter – Widget AbsorbPointer

AbsorbPointer es un widget incorporado en flutter que absorbe el puntero, en otras palabras, evita que se haga clic, toque, desplace, arrastre y responda a su subárbol . En flutter, la mayoría de los widgets ya vienen con una opción para deshabilitarlos, por ejemplo, en RaisedButton podemos establecer la función onClicked en nulo para deshabilitar, o podemos usar NeverScrollableScrollPhysics() para deshabilitar ListView. Pero si queremos deshabilitar un árbol completo de widgets o incluso una pantalla completa a la vez, podemos hacerlo con la ayuda del widget AbsorbPointer . IgnorePointer también es un widget similar en flutter, que también evita que se haga clic en sus elementos secundarios. 

Constructor de la clase AbsorbPointer: 

const AbsorbPointer(
{Key key,
bool absorbing: true,
Widget child,
bool ignoringSemantics}
)

Propiedades del Widget AbsorbPointer:

• absorbing: esta propiedad toma un valor booleano como parámetro y controla si el toque en el widget se absorbe 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: En este ejemplo, veremos cómo podemos usar AbsorbPointer para deshabilitar un IconButton y un RaisedButton.

Primero, veremos una aplicación sin el widget AbsorbPointer en uso.

Ejemplo

import 'package:flutter/material.dart';
 
// function to trigger the app build process
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 _incrementCounter() {
    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
           // Instead use ElevatedButton
            ElevatedButton(onPressed: _incrementCounter, child: const Icon(Icons.add, color: Colors.white)),
            
           // DEPRECATED
            // RaisedButton(
            //   onPressed: _incrementCounter,
            //   color: Colors.green,
            //   child:const Icon(
            //     Icons.add,
            //     color: Colors.white,
            //   ), //Icon
            // ) //RaisedButton
          ], //<Widget>[]
        ), //Column
      ), //Center
    ); //Scaffold
  }
}

Producción: 

Explicación: Echando un vistazo al código de esta aplicación flutter, podemos ver que hay tres clases declaradas, la primera es MyApp , que es un StatelessWidget , que a su vez devuelve un MaterialApp. Y la propiedad de inicio se establece en la clase MyHomePage , que es nuestra segunda clase y también es un StatefulWidget. 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 Text(‘GeeksforGeeks’). losLa propiedad principal contiene un IconButton con un ícono 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. Entonces, cada vez que se presiona el botón, el valor en el contador aumenta en uno.

Ahora, envolveremos el RaisedBotton y el IconButton con el AbsorbPointer y veremos cómo funciona.

// Code snippet of IconButton and RaisedButton wrapped in AbsorbPointer widget 

// IconButton wrapped in AbsorbPointer 
...
 leading: AbsorbPointer(
          absorbing: true,
          child: IconButton(
            icon: Icon(Icons.menu),
            tooltip: 'Menu',
            onPressed: () {},
          ), //IconButton
        ), //AbsorbPointer
...
// RaisedButton wrapped in AbsorbPointer 
...
        // AbsorbPointer(
            //   absorbing: true,
            //   child: RaisedButton(
            //     onPressed: _incrementCounter,
            //     color: Colors.green,
            //     child: Icon(
            //       Icons.add,
            //       color: Colors.white,
            //     ), //Icon
            //   ), //RaisedButoon
            // ) //AbsorbPointer
...
    // RaisedButton is deprecated

            // Instead use ElevatedButton

            AbsorbPointer(
              absorbing: true,
              child: ElevatedButton(
                onPressed: _incrementCounter,
                child: const Icon(Icons.add, color: Colors.white),
              ),
            ),// AbsorbPointer

Producción:

Explicación de salida: ahora, en la salida anterior podemos ver que RaisedButton se ha deshabilitado (aunque no podemos verlo) y no se puede hacer clic ahora. Y cuando el cursor pasa por encima del IconButton, la información sobre herramientas no aparece porque también está deshabilitada.

Entonces, así es como podemos usar AbsorbPointer para desactivar el botón, también podemos usarlo para desactivar un árbol de widgets mucho más grande, como toda la pantalla a la vez.