Hey there, I’m back again after a short break of few days. In my last post, I wrote about Unit Testing with Bloc. Today we’ll be building the Contacts page for our Messenger App, Messio. I really like then new One UI from Samsung and how it pushes content downwards to make it more accessible for one handed use. So I decided to build the contacts page to be something on similar lines. Let’s take a look at what we’ll be building.

Let’s get started!

Sliver, Sliver Everywhere !

To achieve what we call a CollapsingToobar in the Android World, we need to use Slivers in Flutter. A Sliver is basically just a scrollable area which is useful because it’s efficient in scrolling when you have multiple scrollable child widgets together on the screen.

Let’s start by creating the SliverAppBar and SliverList first.

We nest both of them inside the CustomScrollView. A CustomScrollView let’s you supply Slivers to it for custom scrolling behaviors.

The SliverAppBar has the expandedHeight property which is the height of the AppBar when it’s completely expanded. The flexibleSpace is where you declare the flexible content of the AppBar . It animates and reduces in height when you scroll up.

The SliverList is just like a regular ListView , only difference is that in case of SliverList each of it’s children determine their own MainAxis Extent .

The ContactRow Widget

The ContactRowWidget is pretty standard. Nothing much to explain here.

I’ve also created a custom FloatingActionButton with gradient background. This FAB hides and shows using a ScaleTransition based on the scroll direction of the page.

The QuickScrollBar

Our app will also have the capability of quickly scrolling to a position in the page using alphabet scroll.

The QuickScrollBar needs to be aware of the Contacts list and it also needs the ScrollController to scroll the list to a definite position whenever it is dragged. We use the GestureDetector + the vertical drag gesture to achieve this functionality.

Stitch it All Together!

Last thing we need to do is stitch is all together in the ContactListPage . This is how it’ll look.

Notice how we’re using a ScrollListener to animate the scaling of FAB from 1.0 to 0.0.

And that’s it. Slivers are a really cool way of customizing the scrolling behavior of the content. And while you’re at it, checkout the different Sliver Widgets here and also this great article demonstrating different Sliver Widgets.

Hit me up in the comments below or Twitter or Linkedin or Instagram if you have any queries or suggestions or just for a casual tech talk maybe? See you guys in the next one!

Code Changes

#17 Added ContactList

How Can You Contribute?

Open issues with suggestion of better approaches or ideas for the app.

Connect with me on Twitter or Linkedin or Instagram.

Star the Github repository.

Share the series on Twitter.

Follow me on Github.

Posts In This Series

Show Your Support

Press the clap button below if you liked reading this post. The more you clap the more it motivates me to write better!