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)
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?
Actually, I've just tried something and it worked! I replaced InkWell() by GestureDetector() :-)
Great it worked out like this, I never thought of GestureDetector to use in it xD. Will keep in mind for myself too. Thanks :)
Hi, The cursor is not changing immediatley unless I right click the button its weird
impressive.
Thanks Naveen :)
Creativity at its best 🔥
Thank you, always 😄