Flutter

Flutter web cursor with hand pointer style

By February 25, 2020 February 9th, 2021 2 Comments

Working with Flutter it is a pleasant experience. Easy, fast, productive, it just works.

We can create Flutter Apps for iOS and Android in an extremely short time. But even more, we can deliver a web based experience to the users.  Not just mobile  “native”.

Goolge says Flutter web it is not ready for production. I believe so, there are still some missing features when it comes to making your App ready for the web.

But that does not mean that we can just use it and be aware of the little limitations we still have.

I have been working on a web based  project with Flutter.  The first issue I found is that the user does not have the same experience as on the web.

The issue

One thing you just notice straight away is that the mouse is not like in the standard web when hovering on clickable elements.

It does not change to a little hand  to let you know you can click on it.

Well, I wanted to deliver a web site! not a weird web!

So how can you make Flutter web look like a proper web showing the correct cursor style.

The Solution

Modify the index.html  giving an Id to the container.

<body id="flutter_container">

In your dart file:

Wrap your “clickable” widget into this  MouseCursor widget that looks like this:

class MouseCursor extends MouseRegion{

  static var clickableArea = document.getElementById("flutter_container"); //your element id

  MouseCursor({@required Widget child}):super(
      child:child,
      onHover: _mouseOnHover,
       onExit: _mouseOnExit);

  static void _mouseOnHover(PointerHoverEvent event) {
      clickableArea.style.cursor = "pointer";
  }


  static void _mouseOnExit(PointerExitEvent event) {
    clickableArea.style.cursor = "default";
  }
}

 

So you should use it this way:

MouseCursor(child: TwitterHeart() ) );

 

Check it online here

 

That is it!  Easy right!?

 

Or make it crazy… (all what you can do with css)

In this case I set up css classes and change them when on hover or exit the mouse.

<style>
  .mouse_hover{
      cursor:url('https://www.ernegonzal.com/wp-content/uploads/2020/02/hand-2.png'), auto;
  }
  .mouse_exit{
     cursor:default;
  }
</style>

MouseCursor changes like this:

class MouseCursor extends MouseRegion{

  static var clickableArea = document.getElementById("flutter_container");

  MouseCursor({@required Widget child}):super(
      child:child,
      onHover: _mouseOnHover,
      onExit: _mouseOnExit);

  static void _mouseOnHover(PointerHoverEvent event) {
      clickableArea.classes = ["mouse_hover"];
  }


  static void _mouseOnExit(PointerExitEvent event) {
    clickableArea.classes = ["mouse_exit"];
  }
}

Knowing that there are restrictions on the maximum size of a custom cursor. If it exceeds 128×128 size, it will be ignored.

 

 

If you like , you have any question or suggestions, please leave a comment or send me an email!

Happy coding with Flutter! 💙

Ernie

Author Ernie

More posts by Ernie

Join the discussion 2 Comments