How to detect users touching some elements on mobile (flutter-web)? - Stack Overflow

admin管理员组

文章数量:1419215

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)),
                              ),
                            ),
                          ),
                        )
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

本文标签： How to detect users touching some elements on mobile (flutterweb)Stack Overflow