fixed gesture detector area, added feedback on hover

[kphanipavan]

Hi!

I noticed that the margin for the container is inside GestureDetector, which causes teh button to activate even when pressed outside the button area. Changed it by removing the margin and adding padding around the gesture detector.

I added MouseRegion for the card so the mouse cursor changes to link select icon when hovering on a button. Also added color fade to the button for better visual feedback. Had to change the widget to stateful though, for active color change.

I am new to Get, is there a way to do the color change in Get without converting the toolcard widget to stateful ?

Preview:

https://user-images.githubusercontent.com/60005847/192576399-f45797ea-06dc-4b8a-a755-51d409668854.mp4

[gumbarros]

Hello @kphanipavan , thanks for the fix 😄! In Get the principle is to use everything as a Stateless Widget for better performance. The equivalent of setState to a color change is controller.update(), it will update the entire UI.

[gumbarros]

@kphanipavan I fixed it with a Rx value instead of setState:

class ToolCard extends StatelessWidget {
  final Tool tool;
  final Rx<Color> cardColor = Colors.transparent.obs;

  ToolCard(this.tool);

  void onHoverIn(PointerEvent _) {
    cardColor.value = Color.fromARGB(99, 132, 132, 132);
  }

  void onHoverOut(PointerEvent _) {
    cardColor.value = Colors.transparent;
  }

  @override
  Widget build(BuildContext context) {
  ...
  child: Obx(
              () => Card(
                surfaceTintColor: cardColor.value,
  ...

[kphanipavan]

Thank you for the info and accepting my PR : ] I should probably start with some Getx tutorials before making anymore PRs, I am creating more work for you...

Forgot to mention, I also added yaru_colors to pubspec, tried to use a color but used a custom color anyway.