Flutter Widget Guide — SliverList Widget in 5 mins or less.
This is Part 12 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.
After exploring all the basic widgets in Flutter to build your apps, there will come a time when you’ll decide to show a list (probably a long one) of items to your users. It can be a social media app or a news app. To show a list of large no.of items we want a list that lazily builds itself and thus performs well.
Flutter has a solution for this.
SliverList Widget
1 | What?
SliverList is useful when you want to scroll through a large number of items. Like all Slivers, this must also be a part of CustomScrollView. You can have a SliverAppBar widget on top of your list to create that beautiful collapsing app bar animation as you scroll through your list.
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, have a look at the list of colorful items below the SliverAppBar. These items are a part of our SliverList widget and are lazily build as they scroll into view. The SliverList widget takes in a delegate where you provide the list of items you want to show. Here, you can use SliverChildListDelegate if you want to show a predefined list of widgets or you can choose to build your items lazily with SliverChildBuilderDelegate.
For this widget, I had to show you a use case where the list is huge and here it will keep building items as you scroll. You can specify the childCount property to set the number of children.
In case you are wondering, this is the method used to fetch random colors:
///Method to get a random color
static getRandomColor() => Color((math.Random().nextDouble() * 0xFFFFFF).toInt() << 0).withOpacity(1.0);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 🙂
