I have a stack with some transformed items to display them radial. Now I want to increase the size of an element if one hovers over it in Web or is over it with the finger on mobile. I tried using MausRegion and InkWell but both does not work as there must be some coordinate miscalculation. The mouseover just does not trigger in the right moments.

What is the correct approach to use a Mouse over detection for transformed items?

Code:

final List<IconData> flags = [
          Icons.person,
          Icons.access_alarm,
          Icons.photo,
          Icons.phone,
          Icons.telegram,
        ];
return 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: MouseRegion(
          cursor: SystemMouseCursors.click,
          onEnter: (_) => ref
              .read(
                selectedSherlockRadialItemControllerProvider(i).notifier,
              )
              .setTrue(),
          onExit: (_) => ref
              .read(
                selectedSherlockRadialItemControllerProvider(i).notifier,
              )
              .setFalse(),
          child: CircleAvatar(
            backgroundColor: Colors.green,
            minRadius: circleSize,
            child: Icon(
              flags[i],
              color: Colors.white,
              size: circleSize,
            ),
          ),
        ),
      )
          .animate(
            target:
                ref.watch(selectedSherlockRadialItemControllerProvider(i))
                    ? 1
                    : 0,
          )
          .scaleXY(
            alignment: Alignment.center,
            begin: 1,
            end: 1.2,
          ),
  ],
);

Here is a minimal example showing that onPressed from a Button is not even working:

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: 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: FloatingActionButton(
                    onPressed: () {
                      print('goockk');
                    },
                    child: Icon(
                      flags[i],
                      color: Colors.white,
                      size: circleSize,
                    ),
                  ),
                ),
            ],
          ),
        ),
      ),
    );
  }
}