IgnorePointer Widget – Flutter Widget Guide By Flutter Agency

• Flutter Widget Guide

What is IgnorePointer Widget in Flutter?

Nowadays every application uses touch input from users. sometimes it may require to disable the touch in a certain area or in another word, you want to make the touch pointer has no effect. In Flutter, you can use IgnorePointer Widget or AbsorbPointer Widget.

Default Constructor for it will look like below :

IgnorePoiinter({
  Key key,
  bool ignoring: true,
  bool ignoringSemantics,
  Widget child,
});

Properties :

• Key key: The widget key, used to control if it’s should be replaced.
• bool ignoring: Whether this widget is ignored during hit testing. Defaults to true.
• bool ignoringSemantics: Whether the semantics of this widget is ignored when compiling the semantics tree.
• Widget child: The widget to be rendered.

If ignoring value is true, and click inside the widget will be ignored.

Using IgnorePointer Widget is very simple, just wrap the widget you want to render inside an IgnorePointer. As the default value is true, any touch will be ignored if you don’t pass ignoring parameter on the constructor.

If an absorbing value is true, and click inside the widget will be absorbed. If you don’t pass the absorbing parameter, it will use the default value (true) which causes any pointer inside the widget will be absorbed.

IgnorePointer(
    ignoring: _ignoring,
    child:Widget(),
  )

General Queries on IgnorePointer Widget

• Suppose a user wants to have a blurred image on top of other widgets, however, users cannot interact with the widgets below it.

IgnorePointer Widget is the solution here because it will ignore all touch events for the Widget’s passed as its child.

IgnorePointer(child: BackdropFilter(...),)

You can adjust this attribute by changing the bool value of ignoring:

IgnorePointer(ignoring: false, ...)

This will enable all touch events again. You can either use IgnorePointer or AbsorbPointer.

• Using IgnorePointer Widget

IgnorePointer(
  child: ElevatedButton(
    onPressed: () {},
    child: Text("Unclickable button"),
  ),
);

• Using AbsorbPointer Widget

AbsorbPointer(
  child: ElevatedButton(
    onPressed: () {},
    child: Text("Unclickable button"),
  ),
);

Difference between IgnorePointer & AbsorbPointer

If there is a widget beneath your main widget which is also capable of receiving click events, and you use IgnorePointer on the parent widget, the child widget would still receive the click events.

But using AbsorbPointer Widget on the main widget won’t allow the other widget beneath the main widget to receive their click events.

Consider a code snippet as below:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('IgnorePointer vs AbsorbPointer'),
      ),
      body: SizedBox(
        width: double.infinity,
        child: Stack(
          children: <Widget>[
            Positioned(
              left: 0,
              width: 250,
              child: ElevatedButton(
                color: Colors.red,
                onPressed: () => print("Button 1"),
                child: Text("Button 1"),
              ),
            ),
            Positioned(
              right: 0,
              width: 250,
              child: IgnorePointer(
                // Replace this with AbsorbPointer to see the difference
                child: ElevatedButton
                  onPressed: () => print("Button 2"),
                  child: Text("Button 2"),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Thanks for being with us on a FlutterJourney !!!

Conclusion:

In this article, we have understood IgnorePointer Widget will ignore all touch events for the Widget’s passed as its child.

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

Written by Abhishek Dhanani

Abhishek Dhanani, a skilled software developer with 3+ years of experience, masters Dart, JavaScript, TypeScript, and frameworks like Flutter and NodeJS. Proficient in MySQL, Firebase, and cloud platforms AWS and GCP, he delivers innovative digital solutions.