DEV Community: Sahdeep Singh

Custom cursor in Flutter Web...

Sahdeep Singh — Tue, 21 Jul 2020 19:04:14 +0000

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

Submarine - Flutter Stack Challenge

Sahdeep Singh — Thu, 09 Jul 2020 16:20:24 +0000

Here is another codepen, for Weekly Flutter CodePen challenge in July. For the first week we have to use one of the most foundational building blocks in Flutter - "Stack"

You can get more details about this challenge at : https://codepen.io/challenges/2020/july/

I am calling it Submarine, you can dive deep into the ocean using this submarine xD

Use Live preview for better performance in web that too on PC or Laptop.

Live Preview at : https://iamsahdeep.github.io/Submarine-FlutterStackChallenge/#/

Github Source : https://github.com/iamSahdeep/Submarine-FlutterStackChallenge

Codepen Preview

Some Tricks in Code :)

Widget Tree :

Scaffold
--Stack
----SingleChildScrollView (Background)
------TopView
------MiddleView
------BottomView
------DeepestView
----MoonView
----SubMarine
----LightHouse
----SingleChildScrollView (invisible)

Here I have to use another SingleChildScrollView, which is invisible and that too in front of all the View in Stack. Reason for this scrollView is, that all other views in the same Stack, like moon, lighthouse, submarine, were blocking the gesture while Scrolling. So we need another ScrollView and sync its offset with Background ScrollView. How to sink it? its simple, see the code below :

invisibleScrollController.addListener(() {
      if (scrollController.offset != invisibleScrollController.offset) {
        scrollController.jumpTo(invisibleScrollController.offset);
      }
    });

Another Trick, for those animations is to use the scroll offset and pass it to every child Widget and make them rebuild on every scroll change. I have not used any state management like bloc or provider, just simply using setState() to change it.

scrollController.addListener(() {
      setState(() {
        scrollOffset = scrollController.offset / 100;
      });
    });

In code above offset is reduced by dividing it by 100 as offset can go from 0 - 1000 or much more, depends upon the height of the SingleChildScrollView and we usually don't need that high value for small animations.

That offset, than can be use with "Transfrom" widget for scaling and rotation. And offset is also used with "Positioned" widget to make child widget animated w.r.t scroll.

Thanks :)

Liquid Button in Flutter

Sahdeep Singh — Sat, 27 Jun 2020 17:01:28 +0000

Hey, Check out my Experiment for Liquid Button in flutter.

If above preview is not working, link to pen is https://codepen.io/iamSahdeep/pen/GRovBMO
And it only works on laptop or pc.