Flutter Tutorials – #1.5 – Sliver App Bar = Collapsing Toolbar

Introduction

Welcome to Himdeve development, where we are preparing the best tutorials to make your mobile application development easier and more efficient.

Goal

1. Create a Sliver App Bar for the Portfolio widget
2. Learn how to work with the SliverAppBar, FlexibleSpaceBar, and SliverFillRemaining widgets

Procedure

First we open our existing application from the previous tutorial and we open the file portfolio_page.dart.

In the build method, specifically in the Scaffold widget, for the body attribute, we extract the center widget into the new private _buildContent() method. And then we will remove this method call from the body attribute.

Instead, we put a new Flutter widget in the body attribute, the CustomScrollView widget. This widget has several attributes, but we will focus only on the slivers attribute in this tutorial. What is actually a list of widgets. Usually, Flutter uses the children name for this attribute, but here it highlights the fact that CustomScrollView is adapted to work with Slivers.

Sliver

What is Sliver anyway?

Sliver is basically just a part of the scrollable area where the actual scrolling effects can be customized.

Subsequently, we add the SliverAppBar widget to this slivers attribute that creates the widget list.

Sliver App Bar

SliverAppBar is an app bar from the Material Design Library that is linked to the CustomScrollView widget.

It has several attributes, and in this tutorial we will go through some of them.

iconTheme

We start with the iconTheme attribute to define the style for the icons in the sliver app bar. In our case, we just change color from white to black.

backgroundColor

By the backgroundColor attribute we set the value to red.

pinned 

Furthermore, pinned attribute ensure that the top bar remains visible during scrolling.

expandedheight

This attribute represents the height of the appbar when fully expanded. We set it to the value of 200, which is the standard height.

flexibleSpace

This attribute represents a widget that will be in the background of the entire app bar. It will have the same height as the height of the whole appbar. We put here a FlexibleSpaceBar widget that will create this flexible widget.

FlexibleSpaceBar 

This widget has a background attribute in which we insert the Image.network widget with the url of the image and the fit attribute set to BoxFit.cover to fill the entire render area.

Next, we set the title attribute. We could also set the title attribute directly to SliverAppBar, but in that case it would not grow dynamically as the top bar grows, but would remain static only at the top of the screen. We set its value to ‘Portfolio’.

SliverFillRemaining

So we have prepared the top bar of the screen and we now the question is where to define the remaining of the page content. There are several ways, but in this tutorial we will focus on the simplest one, which is using the SliverFillRemaining widget.

SliverFillRemaining is a Sliver that contains only one single box child to fill the remaining space in the viewport. The SliverFillRemaining widget will size its child to fill the viewport in the cross axis.

To do so, we use child attribute of SliverFillRemaining widget and in our case, we put there our existing _buildContent() method.

Conclusion

And with this is our fifth part of this first series of Flutter Tutorials completed and of course you can find the complete source code on the githube.