Dynamic Sliver FloatingActionButton
In this post, I will walk through the process of creating
FloatingActionButton that is pinned to the edge of
FlexibleSpaceBar (shown below). Let’s get to it!
TLDR: I exported pub package, so you can achieve similar FAB behavior. Feel free to use and expand it.
Main problem with implementing pinned
FloatingActionButton like this, is that there is no place inside the
SliverList to put a
Widget that would be on top of
Slivers below it. In order to do it, we have to put our
CustomScrollView and place it inside a
Stack. Here is our starting point:
. . .
As you can see, we have a beautiful
FloatingActionButton pinned to the edge of the
AppBarbut only if the user will not scroll the content. Not the best use case for us. In order to pin
FloatingActionButton to edge of
AppBar, we need to use
ScrollController to keep track of scrolling offset and change position of fab. First, let’s add
ScrollController that will update our Widget’s state:
Then let’s add it to the CustomScrollView:
And then let’s change
FloatingActionButton position depending on scrolling offset. To do that I extracted creating
FloatingActionButton to a new method. A thing that is worth mentioning is that on the first build
_scrollController is not connected to
scrollViewyet, so we can’t directly ask it for offset.
Current result should look like this:
. . .
As you can see, our
FloatingActionButton is scrolling way out of the screen. Let’s hide it when it comes close to the top. To do that we could use
Opacity widget, however visual aspect of that solution is not great since Fab would be just vanishing. In my opinion better solution would be to scale
FloatingActionButton down, so let’s try to do that:
ScaleEnd values can be changed depending on what behavior you expect. I find these values to satisfy my aesthetic needs
. . .
And that’s it! Now we have nice
FloatingActionButton placed on the edge of
AppBar which looks like this:
Since this kind of view might be needed by other people, I exported it as a pub package. I designed it only for my use case so if you think, there are any bugs or missing features I would highly appreciate any pull requests
If you have any questions, feel free to leave a comment!
Founder of Fidev
Flutter enthusiast since Alpha release in 2017. Believes that sharing is caring, which lead him to start a technical blog dedicated fo Flutter in its early days. Loves to see beautiful designs become real apps and is willing to help make it happen. Enjoys sunny beaches far from home.
Join the newsletter!
Join the newsletter to keep track with latest posts and get my special Widget to animate views' entrances without any hassle for FREE!
Check out other posts!
Check out the videos explaining how I implemented awesome SY Expedition Travel animation by Anton Skvortsov! In the following videos I will show you the whole process of creating a UI challenge in Flutter.
Have you ever woken up and thought “How awesome would it be to create Thanos snap effect in Flutter”? Probably not. Well… following Google’s Easter Egg I did. 🙂 And I’ve found out that no one did it in Flutter yet so why not give it a try! In this post, I will explain how I created a Thanos snap effect coming from Avengers: Infinity War movie. Enjoy 🙂
As developers, we have always get into situations where the designers require some fancy transitions which look awesome on the design but are extremely difficult to implement. Being Flutter developer makes it different, makes it fun because we have tools to do it! To prove it in this post, I will continue implementing awesome Buy Tickets design by Dldp and add bottom sheet transitions!