I am using InkWell
's onHover
or alternatively MouseRegion
's onEnter
and onExit
to detect mouse movement over some elements, to animate them. Now my app is used in web
on mobile devices. There this just does not work.
Is there any other way to detect users touching some elements in my app to act accordingly?
In my case I have built some radian menu where the User should be able to swipe over the options listed and see details for each item when the thumb is over it.
My current Code only works on Web when being on Desktop with a real mouse.
MouseRegion(
cursor: SystemMouseCursors.click,
onExit: (_) {
// remove info
},
onEnter: (_) {
// show info
},
child: ...
)
EDIT Complete Code:
import 'package:flutter/material.dart';
import 'dart:math';
import 'package:vector_math/vector_math.dart' show radians;
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
final List<IconData> flags = [
Icons.person,
Icons.access_alarm,
Icons.photo,
Icons.phone,
Icons.telegram,
];
const double distance = 125;
const double circleSize = 45;
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: SizedBox(
height: 550,
child: Column(
spacing: 40,
children: [
SizedBox(
width: 350,
height: 350,
child: Stack(
alignment: Alignment.center,
children: [
for (int i = 0; i < flags.length; i++)
Transform(
transform: Matrix4.identity()
..translate(
distance *
cos(
radians(
-90 + 360 * i / flags.length,
),
),
distance *
sin(
radians(
-90 + 360 * i / flags.length,
),
),
),
child: Material(
color: Colors.transparent,
child: MouseRegion(
cursor: SystemMouseCursors.click,
onExit: (_) {
print('onExit');
},
onEnter: (_) {
print('onEnter');
},
child: GestureDetector(
onTapUp: (_) {
// do something
},
child: CircleAvatar(
minRadius: circleSize,
maxRadius: circleSize,
backgroundColor: Colors.blue,
child: Icon(Icons.add)),
),
),
),
)
],
),
),
],
),
),
),
),
);
}
}