This article is about the Listener class in Flutter. You are going to learn how to use or implement the Listener class in Flutter app development. Read the article for a complete guide.

2. How to use/implement Listener Class in Flutter?
Introduction:
A widget called the Listener triggers callbacks in response to frequent
pointer events.
It pays attention to things like when the cursor is pressed, moved,
released, or canceled that can create motions.
It doesn’t pay attention to mouse-specific events as when the mouse
arrives, leaves, or hovers over an area without clicking any buttons.
Use MouseRegion Class for these events.

3. When comparing the list of objects that a mouse pointer is hovering on
between this frame and the previous frame, MouseRegion is used. This
includes moving mouse cursors, starting events, and ending events.
Use Listener or, preferably, GestureDetector Class to listen to common
pointer occurrences.
In this article, we will see how to use the listener class in the Flutter
app development.
Below is the constructor of the Lister Class.

4. Listener(
{Key? key,
PointerDownEventListener? onPointerDown,
PointerMoveEventListener? onPointerMove,
PointerUpEventListener? onPointerUp,
PointerHoverEventListener? onPointerHover,
PointerCancelEventListener? onPointerCancel,
PointerSignalEventListener? onPointerSignal,
HitTestBehavior behavior = HitTestBehavior.deferToChild,
Widget? child}
)

5. Properties of the Listener class:
PointerDownEventListener? onPointerDown:
Callers can be informed of these events in a widget tree thanks to the
listener.onPointerDown function.
PointerMoveEventListener? onPointerMove:
While the pointer is in contact with the object, it has moved in relation
to that object.
PointerUpEventListener? onPointerUp:
The pointer is no longer in close proximity to the object.

6. PointerHoverEventListener? onPointerHover:
While the pointer is not in contact with the device, it has moved in
relation to it.
PointerCancelEventListener? onPointerCancel:
The input from the pointer is no longer directed towards this receiver.
PointerSignalEventListener? onPointerSignal:
Pointer signals are discrete events that come from the pointer but
don’t affect the state of the pointer itself. They don’t have to be
understood in the context of a chain of events to be understood.

7. HitTestBehavior behavior:
Only if one of their children is struck by the hit test do targets that
defer to their children get events within their boundaries.
Widget? child:
The Flutter framework’s primary class hierarchy is constructed of
widgets. An immutable description of a component of a user interface
is referred to as a widget. Elements that govern the underlying render
tree can be created by inflating widgets.

8. Example of Listener Class:
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text("Flutter Listener Class Sample")),
body: const Center(
child: MyStatefulWidget(),
),
),
);
}
}

9. class MyStatefulWidget extends StatefulWidget {
const MyStatefulWidget({Key? key}) : super(key: key);
@override
State createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State {
int _down = 0;
int _up = 0;
double x = 0.0;
double y = 0.0;
void _incrementDown(PointerEvent details) {
_updateLocation(details);
setState(() {
_down++;
});
}

10. void _incrementUp(PointerEvent details) {
_updateLocation(details);
setState(() {
_up++;
});
}
void _updateLocation(PointerEvent details) {
setState(() {
x = details.position.dx;
y = details.position.dy;
});
}

11. @override
Widget build(BuildContext context) {
return ConstrainedBox(
constraints: BoxConstraints.tight(const Size(400.0, 300.0)),
child: Listener(
onPointerDown: _incrementDown,
onPointerMove: _updateLocation,
onPointerUp: _incrementUp,
child: Container(
color: Colors.green,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text(
'You have pressed or released in this area this many times:'),

12. Text(
'$_down pressesn$_up releases',
style: Theme.of(context).textTheme.headline4,
),
Text(
'The cursor is here: (${x.toStringAsFixed(2)}, ${y.toStringAsFixed(2)})',
),
],
),
),
),
);
}
}

13. Output:

14. Conclusion:
We described the fundamental implementation of the Listener in a
Flutter in the article; you are free to change the code as you see fit. This
was a brief explanation of Listener On User Interaction from our
perspective, and it functions with Flutter. Get experienced consultation
support from our Flutter developer for custom business mobile
application development solutions. Hope you enjoy this article.
Source: https://flutteragency.com/use-implement-listener-class-
flutter/