Ignore Pointer Widget In Flutter. Ignore touch events on a widget
Tags: Flutter Widget, Mobile, Flutter, Mobile App Development, Dart

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.

ignore pointer widget descriptive video

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 ❤❤