Ignore Pointer Widget In Flutter

Today mobile users expect their apps should have a beautiful UI design, smooth animations, and great performance. To achieve this developer needs to create a new feature without compromising on quality and performance. That’s why Google build Flutter.

In this article, I’ll explain how to use the IgnorePointer widget in Flutter 

Table of Contents :

Flutter — Introduction

Widgets — Introduction

IgnorePointer

Code Implementation

Code File

Conclusion

What is Flutter?

Flutter is Google’s open-source UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.

Widgets

Widget is a way to declare UI in a flutter. Flutter provides several widgets that help you build apps that follow Material Design that takes inspiration from React. The central idea is that you build your UI out of widgets. Widgets describe what their view should look like given their current configuration and state.

IgnorePoiner

IgnorePointer is a built-in widget that prevents their children’s widget from pointer-events like tapping, dragging, scrolling, and hover. This widget ignores the pointer-events without terminating them.

Constructor: Creates a widget that is invisible to hit testing.

Properties

ignoring -> takes bool value and decides whether to ignore pointer event or not

ignoringSemantics -> Whether the semantics of this widget is ignored when compiling the semantics tree

Code Implementation

Let’s move on the coding part

This widget is used to prevent unnecessary touch of UI. It is very simple just wrap your widget inside the IgnorePointer widget.

First, we create a widget and wrap it into the IgnorePointer widget.

In this snippet, we are using a button that is wrapped with the IgnorePointer widget. When ignoring is true RaisedButton can’t perform any action. So, IgnorePointer ignoring all the pointer-events. The code is shown below.

Code File

import 'package:flutter/material.dart';

class MyIgnorePointer extends StatefulWidget {
  @override
  _MyIgnorePointerState createState() => _MyIgnorePointerState();
}

class _MyIgnorePointerState extends State<MyIgnorePointer> {
  bool _isIgnore = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Ignore Pointer Demo'),
        ),
      body: Builder(
        builder: (context) => Center(
          child: Padding(
            padding: EdgeInsets.all(15.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                IgnorePointer(
                  ignoring: _isIgnore,
                  child: Column(
                    children: <Widget>[

                      Container(
                        width:  MediaQuery.of(context).size.width,
                        height: 55,
                        child: RaisedButton(
                          child: Text('Click me',style: TextStyle(
                            color: Colors.white,
                            fontSize: 20,
                            fontWeight: FontWeight.bold
                          ),),
                          onPressed: (){
                         
                            showAlertDialog(context);
                          },
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.all(
                                Radius.circular(8)),
                          ),
                          color: Colors.blue,

                        ),
                      ),
                    ],
                  ),
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text('Enable Ignore Pointer?'),
                    Switch(
                        value: _isIgnore,
                        onChanged: (bool value) {
                          setState(() {
                            _isIgnore = value;
                          });
                        }),
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

  showAlertDialog(BuildContext context) {

    // set up the button
    Widget okButton = FlatButton(
      child: Text("OK"),
      onPressed: () {
        Navigator.pop(context);
      },
    );

    // set up the AlertDialog
    AlertDialog alert = AlertDialog(
      title: Text("Message"),
      content: Text("Button is pressed."),
      actions: [
        okButton,
      ],
    );

    // show the dialog
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return alert;
      },
    );
  }}

Conclusion

In this article, I have explained the IgnorePointer widget demo, which you can modify and experiment with according to your own. This little introduction was about to prevent user touch of UI.

I hope this blog will provide you with sufficient information in trying up IgnorePointer Widgets in your flutter projects. We will show to prevent the UI from user interaction, some properties using in “ignoring”, and make a demo program for working IgnoringPointer in your flutter applications. So please try it.

❤ ❤ Thanks for reading this article ❤❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.