pointer_manger

Description:

pointer manger

Description #
Mange the number, type, how, and where touch pointers should interact with your widgets.
How can things go wrong?! #
Suppose you have this setup where the number in between may refer to some non-negative quantity you need.
class MyApp extends StatefulWidget {
const MyApp({super.key});

@override
State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
int _n = 0;

@override
Widget build(BuildContext context) => Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: _n <= 1 ? null : () => setState(() => _n = _n - 2),
child: const Text("-2"),
),
ElevatedButton(
onPressed: _n <= 0 ? null : () => setState(() => --_n),
child: const Text("-1"),
),
Text(_n.toString()),
ElevatedButton(
onPressed: () => setState(() => ++_n),
child: const Text("+1"),
),
],
);
}
copied to clipboard

Then the user do THIS:



This leaves you with unwanted negative value!!


Obviously, you can solve this situation with checking before altering the value, but this example to show you a use case.


The solution #
The easiest solution is to use this package.

just wrap your two buttons with PointerMangerWidget.withAll and add PointerGroupHandler as a parent to the Row.

class MyApp extends StatefulWidget {
const MyApp({super.key});

@override
State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
int _n = 0;

@override
Widget build(BuildContext context) => PointerGroupHandler( // here
groupTag: "no-negative", // this is a single group
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
PointerMangerWidget.withAll( // here
// groupTag: "no-negative", // you can specify the parent group tag.
child: ElevatedButton(
onPressed: _n <= 1 ? null : () => setState(() => _n = _n - 2),
child: const Text("-2"),
),
),
PointerMangerWidget.withAll( // here
child: ElevatedButton(
onPressed: _n <= 0 ? null : () => setState(() => --_n),
child: const Text("-"),
),
),
Text(_n.toString()),
ElevatedButton(
onPressed: () => setState(() => ++_n),
child: const Text("+"),
),
],
),
);
}
copied to clipboard

Then, this is the result:


Additional information #


You can use multiple groups.


You can use PointerMangerWidget.thisOnly to mange pointers on specific widget only regardless of any other widget.


You can also specify the number of touch pointer allowed on specific widget with the maxNumOfPointers parameter in PointerMangerWidget.withAll or PointerMangerWidget.thisOnly constructors.


You can use replaceCurrentWithNext parameter to choose what to do with overflow pointers
(This parameter is documented in the package).


For a more detailed example you can see /example/main.dart.