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.
The problem
Main problem with implementing pinned FloatingActionButton like this, is that there is no place inside the CustomScrollView or SliverList to put a Widget that would be on top of SliverAppBar and Slivers below it. In order to do it, we have to put our FloatingActionButton outside CustomScrollView and place it inside a Stack. Here is our starting point:
. . .
Pinning FloatingActionButton
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:
. . .
Hiding FloatingActionButton
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:
ScaleStart and 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 
You can find source code created in this post here and current repo with the code here.
If you have any questions, feel free to leave a comment!
Cheers
Marcin Szałek
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!
Stripe Checkout in Flutter Web
Flutter Web is getting more mature every day. If you want to accept payments using Stripe Checkout in your Flutter web application, this article is just for you!
Stripe Checkout in mobile Flutter app
Have you ever struggled to integrate card payments into your mobile Flutter app? If so, today is your lucky day! In this post, I present how to use Stripe Checkout in the Flutter app without any hassle!
Interacting with Widgets using Framy
Have you ever developed a widget or a page and you wanted to make sure it works correctly in different scenarios but then it turned out that you can’t just reproduce all the cases you want to cover? Framy may solve such problems!
Very nice article and blog!
Hey!
Thanks! I’m glad you like it 🙂
good job!keep on fighting!
Great Job. Thanks for the article
hey, I need to add only one item and having the same behavior but when I have a number of items that are not scrolling I can’t scroll the image as you did in above example any solution for that?
Hey, can post a link to some code and/or screenshot?
Hi, I’m using sliver_fab & it works wonder.
But may I know what if I want to create multiple fab in sliver by using sliver_fab, how can i achieve that ?
because right now i have this issue with StateController & connectionState (without sliver_fab). You can take a look at this https://stackoverflow.com/questions/54056212/flutter-scrollcontroller-not-working-under-streambuilder-with-connectionstate-co
Hope you can help me,thank you 🙂
Hi man,
I don’t think I got what you mean exactly 🙁
But in order to put multiple fabs, the easiest way would be to just copy sliver_fab and add extra fab directly there, by simple copy-pasting of existing one. At least that’s what I would do 🙂
Hi thank you for your feedback, what I mean is, on is it possible to have 2 sliver_fab on one sliver? how I can do that?
I’ve tried to do this bt it’s not working
Builder(
builder: (context) => new SliverFab(
floatingWidget: FloatingActionButton(
onPressed: () => Scaffold.of(context).showSnackBar(SnackBar(content: Text(“You clicked FAB!”))),
child: Icon(Icons.add),
),
floatingPosition: FloatingPosition(right: 16),
floatingWidget: FloatingActionButton(
onPressed: () => Scaffold.of(context).showSnackBar(SnackBar(content: Text(“You clicked FAB!”))),
child: Icon(Icons.add),
),
floatingPosition: FloatingPosition(right: 16),
expandedHeight: 140.0,
expandedHeight: 140.0,
You would need to create extra fields and copy everything that’s related to it IN SliverFab code, like: sliverPostition1, sliverPosition2, sliverPosition3…, or if you prefer you can do it as a list, but I guess you will need to deal with the details by yourself 😉
Got it! I fixed my issue by following your advice & code, thank you so much 😀
Awesome! Keep it up!
how to hide floating button inside the app bar as the list is hiding while scrolling
Hey, isn’t the whole post about it? 😀 Could be more specific? 🙂
Thanks man!
Great post. Very simple and to the point. Just what I was looking for.