AbsorbPointer: disable user interaction with a widget or a group of widgets

This Article is posted by seven.srikanth at 1/9/2023 4:28:39 AM



In Flutter, the AbsorbPointer widget is a non-visual widget that absorbs pointers, or touch events, that are dispatched to its children. This can be useful in cases where you want to disable user interaction with a widget or a group of widgets.
In this example, we are going to see how to stop a button being clickable. This button can be anything where you just want to avoid user from clicking it.
In flutter, you can achieve the similar functionality using IgnorePointer widget too. However, we are just going see AbsordPointer in this article. 
However, they both work in slightly different ways:
IgnorePointer ignores pointers, or touch events, that are dispatched to its children. This means that the user will not be able to interact with the child widgets, but the widgets will still be visible and participate in layout. Pointers that are ignored are still dispatched to other widgets in the hierarchy. This means that if your widget is on top of another widget, the widgets below it will receive the touches. Here is an example for IgnorePointer, https://fluttercentral.com/Articles/Post/5349/IgnorePointer_example_in_flutter 
AbsorbPointer absorbs pointers that are dispatched to its children. This means that the user will not be able to interact with the child widgets, and the widgets will not be visible or participate in layout. Pointers that are absorbed are not dispatched to any other widgets.
Here is the code from main.dart file for AbsorbPointer. 

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @ override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: AbsorbPointer(
            absorbing: true, // Set to true to absorb pointers
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                ElevatedButton(
                  child: const Text('This button is not interactive'),
                  onPressed: () {
                    // Button press will not be registered
                  },
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
Thanks,
Srikanth  

Tags:








0 Comments
Login to comment.
Recent Comments

Be the first to Comment. You can ask a Query or Share your toughts or Just say thanks.


© 2018 - Fluttercentral | Email to me - seven.srikanth@gmail.com