Flutter Widget Guide — SliverAppBar Widget in 5 mins or less.
This is Part 11 in the series where I’ll cover all the Flutter widgets that are in this YouTube playlist. I have created my own widget guide which I believe will help people who are new in this space. Please have a look at this GitHub project to explore all the amazing widgets.
Click here to ⏬ the App available on Google Play Store. 📱
My main motive behind this series is to keep things to the point. Your time is precious, let’s not waste it and get started.
One of the most common gestures a user performs while using an app is Scrolling. The user might be scrolling through a list of items arranged in a horizontal or vertical fashion. Touch, without any doubt, is the most used gesture to interact with any app. To provide visual feedback to the user while he/she is touching something on the screen, we can show a ripple animation. Using subtle animations like ripple is a good practice and enhances the overall experience of an app. But what if you want to provide such a subtle animation while a user is scrolling through a list inside your app?
Flutter has an interesting solution for this.
SliverAppBar Widget
1 | What?
Now let’s not focus on the name of the widget as it might confuse you at first. Let’s consider this widget as a “Collapsing App Bar” i.e. an app bar that collapses when you scroll through a list below it and change its properties like colour and size along the way. It also provides a default animation to the title while the app bar is being collapsed.
2 | Wondering how it works?
Have a look at the Code snippet below.
Below is the visual representation of the code above.
3 | Explanation
In the above example, what we have is a CustomScrollView widget which can be provided with a list of Slivers. CustomScrollView helps to provide the required scrolling behaviour to the SliverAppBar. Here we have provided two Slivers to it namely SliverAppBar and SliverFixedExtentList. We will focus on the behaviour of SliverAppBar widget here. We can set properties like the colour of the app bar when it is in the expanded or collapsed state, whether the app bar should be fixed or in a floating state as the user scrolls and the expanded height of the widget. The animation that you see on the App bar title is handled by the widget itself. You can specify the position of the title, here we have centred it. Expanded behaviour of the App bar is controlled by the FlexibleSpaceBar widget which is provided to the flexibleSpace property of the SliverAppBar.
Previous 👆
Up next 👇
How many claps does this article deserve?
If you find this article useful, please click the 👏 button and share to help others find it! Feel free to clap many times (10💥, 20💥 or maybe 50💥 ?) It fuels my focus to write more of it.
Connect with me on LinkedIn or say hi on Twitter, mentioning this article. You can drop a mail at annsh29@gmail.com as well.
See more in the series:
Have a wonderful day 🙂
