Decode CustomScrollView

An in-depth look at Flutter’s CustomScrollView Widget

Part of the Decode Flutter Series

Having possibly read my previous article, Decode ListView, you may have noticed I make no mention of an additional ‘scrollable’ widget that also extends ListView’s base class, ScrollView. It’s called, CustomScrollView. And with it, you’re privy to even more scrolling effects.

Since a number of other ‘Sliver’ widgets are involved with CustomScrollView, we’ll dedicate this article to them. Unlike ListView class, you’re to supply ‘Sliver’ widgets directly to the CustomScrollView thus allowing for these additional scrolling effects.

A Sliver contains Widgets which makes up the scrollable area — the ‘visible’ portion of which is called the viewport.

You can see in the gif file above on the left, a ‘floating app bar’ is one of these effects available to you. Expanding or compressing depending on the direction. In the second example, you see that a ‘gridview’ and ‘listview’ can be incorporated together making for another possible scrolling effect. Notice further how the title word, ‘Demo’, moves and resizes as the scrolling occurs.

I Like Screenshots. Tap Caption For Gists.