Let’s start

So if you are advanced in Flutter, you may have already thought about which widget we are going to use at the top of our widgets tree. If not well, let me spoil you! We are going to make use of the CustomScrollView widget combined with Slivers! Those widgets will allow us to relatively easily create a smooth scrolling experience for the user.

If you want to learn more about those, I invite you to check the official documentation!

What we want to achieve at the end is a reusable customized Scaffold with two constructors. One which will be the default way to instantiate our widget, and a second one which will be the builder one.

The builder one should be used when you have a large set of data that you desire to display on the screen without building the ones that are not actually displayed which is the default behavior of ListView for instance. By doing so you can save a lot of performances.

Let’s Code it 🙂

Now that we have laid the foundation, let’s jump into the code!

I know its quite a lot of code but allow me to explain it a bit!

The first thing here is the SliverAppBar. It is responsible for building the responsive app bar. But let’s take a closer look at the floating parameter! It defines whether or not the app bar should become visible as soon as the user scrolls towards the app bar.

Then we have the SliverList that is just displaying its delegate. So basically you could compare it to a Column in a ListView.

And what about the Builder Constructor? 😯

Do not fear, here it comes!

Because we developers always want to have a clean code, we are going to make use of factory constructors. Those are an effective way to implement advanced constructors when you want all your fields to be final for performances purpose.

You can take a closer look at it on the official Dart documentation website.

The code now looks like this:

The important thing to note is that we now use a private constructor as our default one. The children field disappeared to make room for the sliverChildreDelegate field. This new field will be used by the two factories.

The first factory works like the old default constructor. It is just adapted to fit the new pattern.

The second one is new, but not more complicated. It makes use of the SliverChildBuilderDelegate to render the widgets in the way we thought about before.

A Little Bonus? 😊

If you want to combine this with a RefreshIndicator, here is how to do it cleanly.

The End.

Thank you for reading this article 😊🙂.