Explore AbsorbPointer In Flutter
These days applications use touch input from clients/users. Consider the possibility that you need to disable the touch in a specific region or other words, you need to make the touch pointer has no impact. In Flutter, you can utilize IgnorePointer or AbsorbPointer.
AbsorbPointer is a sort of control that precludes client input, for example, button click, the input of input box, scrolling of ListView, and so on you might say that setting the onPressed() of a button to invalid can likewise be acknowledged, indeed, however, AbsorbPointer can give bound together control of numerous parts without expecting you to set every part independently.
In this blog, we will be Explore AbsorbPointer In Flutter. We will execute a demo program of the AbsorbPointer and shows you how to use AbsorbPointer it in your flutter applications.
AbsorbPointer class – widgets library – Dart API
The following sample has an AbsorbPointer widget wrapping the button on top of the stack, which absorbs pointer-events…api. flutter.dev
Table Of Contents::
AbsorbPointer:
AbsorbPointer is a built-in widget in flutter which absorbs pointer, all in all, it forestalls its subtree from being clicked, tapped, scrolled, hauled, and react to hover. In flutter, most widgets currently accompany an alternative to impair them. Yet, assuming we need to disable an entire widget tree or even a full screen without a moment’s delay, we can do it with the assistance of the AbsorbPointer widget. IgnorePointer is likewise a comparable widget in a flutter, which additionally prevents its children from being clicked.
To get a more understanding through the help of video , Please watch:
Demo Module :
The below demo video shows how to use AbsorbPointer in a flutter. It shows how AbsorbPointer will work in your flutter applications. It tells you the best way to utilize it and shows when the user true the switch of AbsorbPointer, then button and textfield not working or touch pointer has no effect. It will be shown on your device.
Constructor:
To utilize AbsorbPointer, you need to call the constructor underneath:
const AbsorbPointer({
Key? key,
this.absorbing = true,
Widget? child,
this.ignoringSemantics,
})
When the user wraps the whole UI with AbsorbPointer then the user can control user interaction to UI by toggling the absorbing property of it.
Properties :
There are some properties of AbsorbPointer are:
- > key: This property is used to control if it should be replaced.
- > child: This property is used to define widgets under the current Widget in a tree. It has only one Child. To allocate multiple children users can use Column Widget, Row Widget, Or Stack Widget, and can wrap it in children.
- > absorbing: This property is used to define whether this widget absorbs during hit testing. The default value is set to true. If the 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.
- > ignoringSemantics: This property is used to define whether the semantics of this widget is ignored when compiling the semantics tree.
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called main.dart inside the lib folder.
First, we will create a bool variable _absorbing is equal to false.
bool _absorbing = false;
In the body, first, we will not add AbsorbPointer. Then, we will create Column() widget. In this widget, we will add an ElevatedButton(). Inside the button, we will add style, text ‘Press the button’ and onPressed() method. Inside the method, we will add Scaffold.of(context).showSnackBar(). Inside SnackBar, we will add content, backgroundColor. Also, we will add TextField().
Column(
children: <Widget>[
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.cyan[300],
),
child: Text('Press the button'),
onPressed: () {
Scaffold.of(context).showSnackBar(
SnackBar(
backgroundColor: Colors.teal[300],
content: Text('Button is pressed'),
),
);
},
),
TextField(),
],
),
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Then, we will add AbsorbPointer(). We will add variable absorbing means whether this widget absorbs during hit testing and add _absorbing. Column widget wrap to it AbsorbPointer().
AbsorbPointer(
absorbing: _absorbing,
child: Column(
children: <Widget>[
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.cyan[300],
),
child: Text('Press the button'),
onPressed: () {
Scaffold.of(context).showSnackBar(
SnackBar(
backgroundColor: Colors.teal[300],
content: Text('Button is pressed'),
),
);
},
),
TextField(),
],
),
),
We will add the Row() widget. In this widget, we will add the mainAxisAlignment was center. We will add the text ’Absorb Pointer?’ and Switch() method. In this method, we will add value, onChanged. In onChanged, we will add setState() method. In this method, we will add _absorbing is equal to value.
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Absorb Pointer?'),
Switch(
activeColor: Colors.cyan[300],
value: _absorbing,
onChanged: (bool value) {
setState(() {
_absorbing = value;
});
},
),
],
),
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'package:flutter/material.dart';
import 'package:flutter_absorb_pointer_demo/splash_screen.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Splash(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool _absorbing = false;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
backgroundColor: Colors.cyan[300],
title: Text("Flutter Absorb Pointer Demo"),
),
body: Builder(
builder: (context) => Center(
child: Padding(
padding: EdgeInsets.all(15.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
AbsorbPointer(
absorbing: _absorbing,
child: Column(
children: <Widget>[
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.cyan[300],
),
child: Text('Press the button'),
onPressed: () {
Scaffold.of(context).showSnackBar(
SnackBar(
backgroundColor: Colors.teal[300],
content: Text('Button is pressed'),
),
);
},
),
TextField(),
],
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Absorb Pointer?'),
Switch(
activeColor: Colors.cyan[300],
value: _absorbing,
onChanged: (bool value) {
setState(() {
_absorbing = value;
});
},
),
],
),
],
),
),
),
),
);
}
}
Conclusion:
In the article, I have explained the basic structure of the AbsorbPointer in a flutter; you can modify this code according to your choice. This was a small introduction to AbsorbPointer On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information on Trying up the AbsorbPointer in your flutter projects. We will show you what the AbsorbPointer is?. Show constructor and properties of the AbsorbPointer. Make a demo program for working AbsorbPointer. In this blog, we have examined the AbsorbPointer of the flutter app. I hope this blog will help you in the comprehension of the AbsorbPointer in a better way. 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 a 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.
