I’ve recently needed a more stylish and better functioning alternative to a dropdown list for my Flutter project and found that a GridView works perfectly for this. We can use the GridView to allow us to create a list of selectable items that we can then use wherever we need it. It’s super simple to do and works flawlessly.
For this, we’re going to be making a selectable GridView that allows us to select multiple icons. To make this easier and more organized, we’ll create a widget for the GridView items:
Our GridViewItem widget is fairly straightforward. We have two private fields, _iconData and _isSelected. The widget itself is just a RawMaterialButton which allows us to easily set the shape of it to a circle and it's fill color depending on if it's selected or not. We have no use for the onPressed property, so we just set that to null.
Back to our main file, we need to create a couple of variables: one for the list of all the icons in our GridView, and another list for the selected icons.
Within our build function, we can make a Widget variable for the GridView. I’ve gone ahead and added comments to explain what’s going on.
Lastly, still within our build function, we can set the body of our Scaffold to the gridViewSelection we created.
That’s all it takes to make a selectable GridView. If needed, it can be modified to allow for selecting a single item instead of multiple by changing up the onTap property of the GestureDetector.
Instead of icons, you can use anything else you want: custom objects, strings, etc. I’ve found this to be a great, stylish, and functional alternative to other methods of item selection.
Here’s the full code:
Originally published on ericgrandt.com.
