DEV Community

Cover image for Submarine - Flutter Stack Challenge
Sahdeep Singh
Sahdeep Singh

Posted on

7 4

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

AWS Q Developer image

Your AI Code Assistant

Ask anything about your entire project, code and get answers and even architecture diagrams. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Start free in your IDE

Top comments (2)

Collapse
 
insanenaman profile image
Naman Gupta β€’

AFAIK, this is the coolest thing I have ever seen. Keep going. πŸ”₯πŸ”₯

Collapse
 
iamsahdeep profile image
Sahdeep Singh β€’

Thank you Naman :)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay