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

The Fastest, Most Accurate API for Voice AI

Ad Image

Power your Conversational AI with the most accurate real-time speech-to-text API. Available in 50 languages and at <1-second latency. Perfect for building seamless and emotionally intelligent voice experiences.

Start building today 🛠️

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

Image of Bright Data

Feed Your Models Real-Time Data – Enhance your AI with up-to-the-minute data.

Utilize our live data feeds for dynamic model training, ensuring your AI systems are always ahead.

Access Real-Time Data

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

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

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay