DEV Community

Cover image for Custom cursor in Flutter Web...
Sahdeep Singh
Sahdeep Singh

Posted on

11 4

Custom cursor in Flutter Web...

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

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

Top comments (8)

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

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
 
dananee profile image
GoldCoin

Hi, The cursor is not changing immediatley unless I right click the button its weird

Collapse
 
naveenjujaray profile image
Naveen Jujaray

impressive.

Collapse
 
iamsahdeep profile image
Sahdeep Singh

Thanks Naveen :)

Collapse
 
insanenaman profile image
Naman Gupta

Creativity at its best 🔥

Collapse
 
iamsahdeep profile image
Sahdeep Singh

Thank you, always 😄

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay