Being an app developer we are always at a point when we want to implement the item selection and performs operations on it.
In this article, you will learn how to add the selection of items in your app.
Suppose we only have a name ( String ) and rank ( int ) on our list.
class Item {
String imageUrl;
int rank;
Item(this.imageUrl, this.rank);
}
We need to create two lists, itemList for all items and selectedList for selected items.
List<Item> itemList;
List<Item> selectedList;
@override
void initState() {
loadList();
super.initState();
}
loadList() {
itemList = List();
selectedList = List();
List.generate(20,(index){
itemList.add(Item("assets/pringles.png", index+1));
}
}
Let’s jump into UI.
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: getAppBar()
);
}
For AppBar , I have created a separate widget method because you must have seen in apps when selecting it’s the app bar changes. We also need to update the app bar whenever we are selecting items.
We will check in the selectedList length whether it has any item in the list and change the app bar accordingly.
getAppBar() {
return AppBar(
title: Text(selectedList.length < 1
? "Multi Selection"
: "${selectedList.length} item selected"),
);
}
}
I have created a separate widget for the grid item and has a callback in it which will provide the bool value to tell whether it is selected or not.
https://gist.github.com/ashishrawat2911/3cdb0238fc68f78ae0fa5777ad445d60#file-griditem-dart
Now generate the list.
body: GridView.builder(
itemCount: itemList.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 4,
childAspectRatio: 0.56,
crossAxisSpacing: 2,
mainAxisSpacing: 2),
itemBuilder: (context, index) {
return GridItem(
item: itemList[index],
isSelected: (bool value) {
setState(() {
if (value) {
selectedList.add(itemList[index]);
} else {
selectedList.remove(itemList[index]);
}
});
print("$index : $value");
},
key: Key(itemList[index].rank.toString()));
}),
If you see, I have added the item in the selected list in the when the item is selected and removes when the item is deselected.
Now we have implemented the selection the grid, let’s implement some action.
https://gist.github.com/ashishrawat2911/aa9914ba5557124072d1c18d94861cf7#file-sellectionappbar-dart
I have added the delete button on the AppBar to delete the item in the itemList that are present in the selectedList .
If you are wondering why I am using the key because when I was deleting the values it was only updating in the widget tree but not exactly in the element tree.
To know more about keys in flutter check out
That’s it for this article.
Check out the GitHub repo used for this article.
ashishrawat2911/Flutter-MultiSelection
You can’t perform that action at this time. You signed in with another tab or window. You signed out in another tab or…github.com
Thanks for reading this article ❤
If I got something wrong 🙈, Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Connect with me on Linkedin and Github
From Our Parent Company Aeologic
Aeologic Technologies is a leading AI-driven digital transformation company in India, helping businesses unlock growth with AI automation, IoT solutions, and custom web & mobile app development. We also specialize in AIDC solutions and technical manpower augmentation, offering end-to-end support from strategy and design to deployment and optimization.
Trusted across industries like manufacturing, healthcare, logistics, BFSI, and smart cities, Aeologic combines innovation with deep industry expertise to deliver future-ready solutions.
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally rich apps. Hire a Flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! For any flutter-related queries, you can connect with us on Facebook, GitHub, Twitter, and LinkedIn.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
