Demystify best designs and implement in Flutter — Part 1
I am always been fond of designs and photography stuff. I love beautiful designs even though I can not be able to make a perfect one but still, I love to create those beautiful designs out there on best websites like dribble and uplabs, etc. I don’t want to unauthentically post some code or something this post or series is just for demonstrating flutter beauty and design integration and some of my thoughts on how to make those designs possible.
This series will be having lots of code so I would recommend to fire-up a laptop.
In part one what we are trying to build is this:
Cuberto is one of the best designers in my favorites list and I like the stuff they create. Here is the original link to the design that we are going to create:
I’m not able to post video and also there’s another reason I don’t want to is due to the credits, which I don’t want to take as It’s not my design but the best one out there so look out for their designs and contribute.
Let’s first check what are the components that we are going to need by drilling down this design.
First and foremost we will be needing sliver app bar for about card and profile photo collapse effect.
The second one is the feeds card now that card is placed above about card and when we drag both cards are moving up with the collapse effect. We can not add two scrolls on top of each other in slivers so we will be needing a stack view inside that we will put sliver and feed card.
And the third one is the logic to coordinate the collapse effect when the feed card reaches the about card top point and vice versa.
Let’s create dummy widgets, for now, we won’t be cloning the same view but will create dummy one.
We have created a list with a column. Inside the column, there is an image and just a text widget. for now, it’s a static dummy list.
We have created a list with a Row. Inside the row, there are three containers with icons that will replicate the original design.
and so for about widget, we will place all lists in a column. remember we are going to use slivers for about card and so we won’t need SingleChildScrollView here. While we will be needing scrolling widget for feed card.
There’s another catch in that which is the drag part. go again and look at that video so the first user is dragging the feed page until the toolbar is collapsed or should we say the top user image is collapsed and then the feed page can scroll infinitely.
And so what we need to do? any guess?
Duh!!!!! If you are not able to guess just think we can’t scroll inner items until we expand the outer item to the fullest. which means we need to listen to the outer item collapsed and then setState for a scroll.
There are multiple scroll physics out there in flutter we are going to use two of them which is NeverScroll physics and Bouncing scroll physics.
again why never scroll? well, we do not want our users to scroll the feed widget when it’s not expanded to the fullest. and so until the user expands the feed widget to the fullest we are going to set never scroll physics to the scroll widget.
And so we will be needing a scroll controller and scroll physics in our feed widget.
Okay, So there is also another problem we might face which is? Well, feed card can scroll and drag but what if the user picks about card at that time we need to hide the feed card and we can animate the feed card to hide going down but for now, we are going to push the feed card as much as the user scrolls about card to the top.
And to do that we will be needing a scroll controller but other than that we are going to use NotificationListener class. This class helps the developer to get the notification when the widget tree items have changed. Like here we are scrolling the about card with slivers and due to that, the scroll details are changing.
There are few problems that we might be facing when trying something new like here I was trying to place a card on top of slivers but getting content overflow because I was thinking of top point and not the bottom point in Positioned widget so do not forget that. Also, another thing SliverToBoxAdapter which I have yet not seen in any examples out there because they use SliverExpaned or something like that which will not be able to hold our column due to too much content so I tried too many things and fall on this class. And last but not least we are going to need the notifier that sliver has been collapsed and currently I have not seen anything in sliver class itself. so what we need to use is LayoutBuilder which will give us the hight and from which we are building FlexibleSpaceBar but before that we are checking for minHeight it can collapse to and updating the variable. currently, we are going to hardcode things but we can separate them in another file.
So we have done our part with UI and now the logic part remains.
Will explain all logic but not putting any code you can checkout repository from the link added at the end of the post.
- Calculate all initial points like for all resolutions where the feed widget will be placed from the top.
- We need to move feed when we drag and so we are going to combine the Positioned Widget top point with GestureDetector which will give us the drag points and then by calculations we will update top point and call setState method and so the user will feel like he is dragging the feed widget.
- Once the user dragged the feed card up to the about card, We need to push our sliver up a bit and to do that we are going to use about widget scroll controller. We will be calling the jump method with the pixel we have moved.
- When we drag the about card we need to hide feed card by animating it to downside although in this code we are not using animation we are purely pushing them down using that top variable of PositionedWidget but user will get feel that we used animation, and to do that we need to get the scroll points which we will be getting using NotificationListener class which uses the inheritance/InheritedWidget and the scroll of the slivers gets propagated to this widget. And by determining that we are going to push feed card down a bit.
- And last but not least we are going to listen to the controllers, that scroll reached to the end or not. Think about it when we drag feed card to the top and once slivers going to collapse we will be using NotificationListener to update the scroll physics of the feed card and now user can no longer drag the widget to the top but what if user don’t want to scroll and want to collapse widget again? at that time we need to have NeverScrollPhysics when the feed widget is not yet scrolled same goes for about widget.
And voila!! We did that animation shown in the video. go through this link:
I know It’s too length post but hey there’s a lot of things to cover so I can’t document it in a little post. I’m also preparing video tuts for this series so stay tuned.
Hope you liked it.
Do you know you can press the clap👏 button 50 times? The higher you go, the more it motivates me to write more stuff for you guys!
Hello, I am Parth Dave. A noob developer and noob photographer. You can find me on Linkedin or stalk me on GitHub or maybe follow me on Twitter?
Have a nice fluttery day!
