Flutter Widget Guide — SliverGrid Widget in 5 mins or less.
This is Part 13 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.
In the previous part of this series, we talked about the SliverList widget. Now that widget is great to show a list of items in a linear fashion. The widget builds its children lazily so that’s good for performance as well. But what if you want to show a list of items in a grid view and want the same lazy building properties of the SliverList widget and maybe combine a list view and a grid view in a single view.
Flutter has a solution for this.
SliverGrid Widget
1 | What?
Just like a SliverList, this widget is useful when you want to scroll through a large number of items but want them to be arranged in a Grid fashion. Like all Slivers, this must also be a part of CustomScrollView. Yes, you can have a SliverAppBar widget on top of this widget 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, I have used the same technique to show the list items as I did in the SliverList tutorial. Here, all the items are built lazily as mentioned before. This widget takes in a gridDelegate to specify the properties that define the size and position of the children. Here we have provided a SliverGridDelegateWithFixedCrossAxisCount and have set its crossAxisCount (no.of items in the horizontal axis) property to 4. Next, we provide this widget with a delegate to specify the list of items you want to show.
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 🙂
