DEV Community

loading...
Cover image for Custom cursor in Flutter Web...

Custom cursor in Flutter Web...

iamsahdeep profile image Sahdeep Singh ・2 min read

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 :)

Discussion (7)

pic
Editor guide
Collapse
fdcecile profile image
Cecile

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?

Collapse
fdcecile profile image
Cecile

Actually, I've just tried something and it worked! I replaced InkWell() by GestureDetector() :-)

Collapse
iamsahdeep profile image
Sahdeep Singh Author

Great it worked out like this, I never thought of GestureDetector to use in it xD. Will keep in mind for myself too. Thanks :)

Collapse
naveenjujaray profile image
Naveen Jujaray

impressive.

Collapse
iamsahdeep profile image
Sahdeep Singh Author

Thanks Naveen :)

Collapse
insanenaman profile image
Naman Gupta

Creativity at its best πŸ”₯

Collapse
iamsahdeep profile image
Sahdeep Singh Author

Thank you, always πŸ˜„