Fancy Scrolls in Flutter using Slivers

Vijay R
3 min readDec 3, 2022

In this article we will discuss about how to achieve fancy scrolls in our flutter app using Sliver widget.

🎥 Video Tutorial

🔭 Implementation

We will try to implement the following scroll👇 using CustomScrollView with slivers.

1) Create CustomScrollView widget:

Let’s first start by creating a CustomScrollView widget that is going to take a list of sliver widgets. Each sliver corresponds to individual components like the appbar, searchbar and listview.

2) Define the components

Now let’s start by defining the individual components one by one.,

SliverAppBarBldr()

This class uses SliverAppBar widget for building the top offers image.

SliverSearch()

This class uses SliverAppBar widget for building up the search bar widget.

SliverListBldr()

This class uses SliverList widget for building up the list of containers.

Well that’s it. 🎉 Run the code to see it in action.🥳

Refer my video tutorial for complete guide:👉 https://youtu.be/NkOXry6jbTQ

Get the complete source code here:👉 https://github.com/vijayinyoutube/elastic_slivers_app

Check out all my Flutter related blogs here.,👇

--

--

Vijay R

Hai👋 I’m a flutter developer experienced in designing and developing stunning mobile apps. Reach out for freelance projects: calico.takeoff_01@icloud.com