Custom cursor in Flutter Web...

#codepen #flutter #dart #webdev

So for the 3rd week of Codepen's flutter challenge we had to use implicit animations in flutter, using them I kind of made a custom cursor for the website.
We are not actually changing the system cursor to another like in this blog, rather its a trick, we are hiding the real one and adding a widget to the current hover position.

Lets get started

First we need to wrap our scaffold's body with MouseRegion widget, with it we can get the cursor position in real-time and it also have property named cursor through which we can change the actual cursor or replace with other system cursors.
In our case we will hide cursor and set pointer on Hover, like this :

body: MouseRegion(
          cursor: SystemMouseCursors.none,
          onHover: (eve) {
            setState(() {
              pointer = eve.position;
            });
          },
          child: ...
      ),

Second step is to add a widget at the pointer's position. For that we will use Stack widget and Positioned widget to position our custom made cursor in the stack. Make sure your stack have full width and height.

Stack(
   children: [
       Positioned(
           left : ...
           top : ...
          ),
       OtherWidgets(),
     ],
   )

Now we need to add child to Positioned widget, I made the simple Cursor (its just a circular ring).

Container(
      height: 200,
      width: 200,
      decoration: BoxDecoration(
           borderRadius: BorderRadius.all(Radius.circular(100)),
           border: Border.all(
                 width: 4,
                 color: Colors.white,
                 style: BorderStyle.solid)),
     ),

Now just one this is left i.e., to position this cursor. For that we will just use the dx and dy from the pointer offset. So the complete code will look like :

      Positioned(
         left: pointer.dx - 100,
         top: pointer.dy - 100,
         child: Container(
           height: 200,
           width: 200,
           decoration: BoxDecoration(
               borderRadius: BorderRadius.all(Radius.circular(100)),
               border: Border.all(
                   width: 4,
                   color: Colors.white,
                   style: BorderStyle.solid)),
          ),
       ),

Why -100 ? you know it :)

Here we go, you got yourself a custom Cursor in flutter web. But there is something missing? cursor movement is kind of stiff, right? Here comes the implicit animations part.

Just simply use AnimatedPositioned widget instead of Positioned and add duration to it.

Result

I have added other animations as well using the same criteria in the following pen.
Preview : https://flutteranimations.netlify.app/#/

Thanks for reading :)

Top comments (8)

Cecile • Aug 17 '20

Thank you for the explanations and for sharing this code. The result is really cool and easy to implement! Do you think there is any way to hide the hand cursor when the mouse is hovering over an InkWell widget?