Flutter MouseRegion is not working when the child is a Chip Widget

user_13276253 0
Viewed 642

The mouse cursor in my flutter web program is not changing to a click cursor on hover when the child is a Chip widget. I changed the Chip to a Text and a Container widget and the mouse cursor changes without any issues.

Below is the code of the MouseRegion.

return MouseRegion(
  cursor: SystemMouseCursors.click,
  child: Container(
    width: 200,
    alignment: Alignment.centerRight,
    child: GestureDetector(
      onTap: () {},
      child: Chip(
        backgroundColor: kLightPrimary,
        avatar: const Icon(
           Feather.phone_call,
           size: 18.0,
           color: kPrimaryColor,
        ),
        label: Text(
          "Test num",
          style: GoogleFonts.poppins(
              fontWeight: FontWeight.w500, color: kPrimaryColor),
          textAlign: TextAlign.end,
        ),
        padding: const EdgeInsets.all(kDefaultPadding),
      ),
    ),
  ),
),
flutter-web dart flutter
2 Answers

Instead of MouseRegion and GestureDetector on a Chip, you want to use ActionChip instead.

    ActionChip(
        onPressed() {/* use onPressed even if it would be empty */}
        backgroundColor: kLightPrimary,
        avatar: const Icon(
           Feather.phone_call,
           size: 18.0,
           color: kPrimaryColor,
        ),
        label: Text(
          "Test num",
          style: GoogleFonts.poppins(
              fontWeight: FontWeight.w500, color: kPrimaryColor),
          textAlign: TextAlign.end,
        ),
        padding: const EdgeInsets.all(kDefaultPadding),
      )
user_7041320

Change your GestureDetector to InkWell this is working for me.

return  Container(
    width: 200,
    alignment: Alignment.centerRight,
    child: InkWell( //use InkWell insted of GestureDetector 
      onTap: () {},
      child: Chip(
        backgroundColor: kLightPrimary,
        avatar: const Icon(
           Feather.phone_call,
           size: 18.0,
           color: kPrimaryColor,
        ),
        label: Text(
          "Test num",
          style: GoogleFonts.poppins(
              fontWeight: FontWeight.w500, color: kPrimaryColor),
          textAlign: TextAlign.end,
        ),
        padding: const EdgeInsets.all(kDefaultPadding),
      ),
    ),
),
user_102928180
Related