From displaying the title of a screen to more detailed information, the app bar is one of the most common widgets in the flutter apps.

Sadly, you may have a lot of content to display on the rest of the screen and your most loved widget may become your worst ui nightmare.

But you don't have to worry, I got the solution to achieve your dream : You need to make an awesome appBar scrolling animation!

And we're going to talk about three distinct ways to do this!

A scroll controller for your flutter appBar animation

The idea here is to listen to your component when you're scrolling. You need to get the scroll offset and give it to your custom app bar like this :++code>
++/code>

Once you have it, you will be able to use this offset to do any scroll animation you want for your app bar :++code>
++/code>

Here is the result :

Here is a dart pad to play with this animation :

DartPad

Doing so will give you full control of the scroll animation. It can be helpful if you use a package that provide its own scrolling widget.

But if you have not limitations of this kind, Flutter has another way to do this with slivers which will give you a smoother animation with better performances.

SliverAppBar : An easy way for your flutter appBar animation

First of all, what is a sliver ? According to flutter documentation : "A sliver is a portion of a scrollable area that you can define to behave in a special way. You can use slivers to achieve custom scrolling effects, such as elastic scrolling." (https://docs.flutter.dev/development/ui/advanced/slivers)

In our case, we will be using the ++code>SliverAppBar++/code> sliver.

You can implement it like in the following example :

If you have a simple scroll animation to do, it's what I would recommend because it's easy to implement.

Here is a dart pad to play with this animation :

DartPad

But sometimes you need to do something a little bit more complex and the ++code>SliverAppBar++/code> won't be enough..

SliverPersistentHeader to the rescue for your flutter appBar animation

If you need to personalize your scroll animation even further, you may need to use a lower level sliver.

By looking at how the ++code>SliverAppBar++/code> is implemented, we can see it's using ++code>SliverPersistentHeader++/code>.

To use it, you will have to create your own ++code>SliverPersistentHeaderDelegate++/code>.

You'll have to define the two properties ++code>maxExtent++/code> and ++code>minExtent++/code> to decide between which values your appBar height must animate on scroll.

And a ++code>shouldRebuild++/code> method to decide whether you should rebuild when modifying the delegate configuration (like ++code>minExtent++/code> and ++code>maxExtent++/code>).

You will be able to create an ++code>expendPercentage++/code> from your ++code>maxExtent++/code> / ++code>minExtent++/code> and a ++code>shrinkOffset++/code> you get from the build method. This will help create all your scroll animation in your appBar.

Here's a sample of how to create your delegate :

And it can be used in a ++code>SliverPersistantHeader++/code> in your code like this :

This will allow you to get any kind of scroll animation you want, no limits in here.

And you will get the smoothness and performance you couldn't have using a scroll controller.

Here is a dart pad to play with this animation :

DartPad

Which appBar animation to choose for your flutter app

To sum up, if you just need a simple scroll animation, the ++code>SliverAppBar++/code> may be your best choice because it is easy to implement.

If it's not enough for your needs, using a ++code>SliverPersistentHeader++/code> will allow you to keep the smoothness of the ++code>SliverAppBar++/code> animation with more complex patterns.

And if you do not have the possibility to use slivers because of a package or another technical issue you got on your project, you can still use a scroll controller to get your animation.