Submarine - Flutter Stack Challenge

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

Comments

[Naman Gupta]

AFAIK, this is the coolest thing I have ever seen. Keep going. 🔥🔥

[Sahdeep Singh]

Thank you Naman :)