How to use the AbsorbPointer widget in Flutter
The AbsorbPointer widget in Flutter is a powerful tool that allows us to control the touch interactions within a widget subtree. It can be particularly useful when we want to prevent certain user interactions, such as taps and gestures, from being detected by widgets within a specific subtree. In this Answer, we will explore how we can implement AbsorbPointer.
Constructor and parameters
The AbsorbPointer widget provides a constructor with various parameters to customize its behavior and layout.
const AbsorbPointer({
Key? key,
bool absorbing = true,
Widget? child,
bool? ignoringSemantics
})
Let's take a closer look at each parameter and its purpose:
key: A unique identifier for the widget.absorbing: Determines if the widget should block user interactions within its subtree (trueto block,falseto allow).child: The widget subtree where interactions should be controlled.ignoringSemantics: Iftrue, ignores the semantics of the subtree for accessibility purposes; iffalse, the semantics are considered.
Importing necessary libraries
Before using the AbsorbPointer widget, make sure to import the required libraries in our Dart file:
import 'package:flutter/material.dart';
Basic syntax
Here's the basic syntax of the AbsorbPointer widget:
AbsorbPointer(absorbing: true, // Set to 'false' to allow interactions, 'true' to block interactions.child: YourWidgetHere(),)
Use cases
Form submission: We can use
AbsorbPointerto prevent users from submitting a form multiple times by blocking interactions while the form is being processed.Loading screens: When displaying a loading screen, we can use
AbsorbPointerto block interactions until the loading is complete.Complex widgets: If we have complex widgets that contain multiple interactive elements, we can use the
AbsorbPointerto selectively block interactions on certain parts of the widget.Error states: We can prevent users from interacting with specific UI elements when an error occurs, giving them a clear indication that those elements are not available at the moment.
Implementing the AbsorbPointer
Below we will explain a complete example of using the AbsorbPointer widget in a Flutter app:
Declare variables
The isButtonDisabled variable is used to track the disabled/enabled state of the button.
// Declare Variablesbool isButtonDisabled = false;
Function for button toggle
The _toggleButtonState function is responsible for toggling the button's disabled/enabled state.
// Function to toggle the button's disabled/enabled statevoid _toggleButtonState() {setState(() {isButtonDisabled = !isButtonDisabled;});}
Function to enable button
The _enableButton function enables the initially disabled button.
// Function to enable the buttonvoid _enableButton() {setState(() {isButtonDisabled = false;});}
Function to show snackbar
The _showSnackBar function displays a snackbar with a given message.
// Function to show a snackbarvoid _showSnackBar(String message) {final snackBar = SnackBar(content: Text(message),duration: Duration(seconds: 2),);ScaffoldMessenger.of(context).showSnackBar(snackBar);}
AbsorbPointer widget
The _buildAbsorbPointerButton function creates an AbsorbPointer widget containing the main button. It controls whether interactions are absorbed based on the button's disabled state.
// Widget to create AbsorbPointer with a buttonWidget _buildAbsorbPointerButton() {return AbsorbPointer(absorbing: isButtonDisabled,child: ElevatedButton(onPressed: () {_toggleButtonState();_showSnackBar('Button Clicked!');},child: Text('Click Me'),),);}
Display button state
The _buildButtonStateText function creates a widget that displays the current state of the button (disabled/enabled).
// Widget to display the button's stateWidget _buildButtonStateText() {return Text(isButtonDisabled? 'Button is Disabled': 'Button is Enabled',style: TextStyle(fontSize: 18,fontWeight: FontWeight.bold,color: isButtonDisabled ? Colors.red : Colors.green,),);}
Enable button widget
The _buildEnableButton function creates the "Enable Button" button, which, when clicked, enables the initially disabled button.
// Widget to create the "Enable Button" buttonWidget _buildEnableButton() {return ElevatedButton(onPressed: _enableButton,child: Text('Enable Button'),);}
Output
After running the above code, we can see the following output:
Code example
We get the following output by putting together the code explained above.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'AbsorbPointer Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
// Declare Variables
bool isButtonDisabled = false;
// Function to toggle the button's disabled/enabled state
void _toggleButtonState() {
setState(() {
isButtonDisabled = !isButtonDisabled;
});
}
// Function to enable the button
void _enableButton() {
setState(() {
isButtonDisabled = false;
});
}
// Function to show a snackbar
void _showSnackBar(String message) {
final snackBar = SnackBar(
content: Text(message),
duration: Duration(seconds: 2),
);
ScaffoldMessenger.of(context).showSnackBar(snackBar);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Educative AbsorbPointer Answer'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
// AbsorbPointer Widget
_buildAbsorbPointerButton(),
SizedBox(height: 20),
// Display Button State
_buildButtonStateText(),
SizedBox(height: 20),
// Enable Button
_buildEnableButton(),
],
),
),
);
}
// Widget to create AbsorbPointer with a button
Widget _buildAbsorbPointerButton() {
return AbsorbPointer(
absorbing: isButtonDisabled,
child: ElevatedButton(
onPressed: () {
_toggleButtonState();
_showSnackBar('Button Clicked!');
},
child: Text('Click Me'),
),
);
}
// Widget to display the button's state
Widget _buildButtonStateText() {
return Text(
isButtonDisabled
? 'Button is Disabled'
: 'Button is Enabled',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: isButtonDisabled ? Colors.red : Colors.green,
),
);
}
// Widget to create the "Enable Button" button
Widget _buildEnableButton() {
return ElevatedButton(
onPressed: _enableButton,
child: Text('Enable Button'),
);
}
}
Conclusion
The AbsorbPointer widget in Flutter provides an efficient way to control touch interactions within a specific widget subtree. Using the absorbing parameter, we can easily enable or disable interactions based on your application's logic. Providing a seamless and intuitive interface can significantly enhance the user experience.
Free Resources
