Fancy Scrolls in Flutter using Slivers
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.,👇
Other articles you may like.,
🔵Setting up your Flutter app for publishing in Play Store.
🔴Confetti Animation in Flutter
🟡 Change App Launcher Icon in Flutter
🔴 AnimatedContainer Widget in Flutter
Most popular
Flutter Tutorials
If you found this article useful and wish to support my work, you can consider buying me a ☕️ coffee.👇
If you want to know more about Flutter and various Widgets in Flutter…?🤓 Then visit my channel 👉🏻 vijaycreations🚩
Thanks.,