Multi Select List Items in Flutter

This article explains you how to create multi select list to select multiple items to perform some actions in flutter application. You can also check out flutter listview related articles.

If we want to delete multiple items in listview then we need to delete every item separately. But using multi_select_item flutter package, we can select multiple or all items in flutter listview. So we can delete multiple or all items at once.

Add required package in pubspec.yaml file

multi_select_item: ^1.0.3

Add data in array for Multi Select List

In this flutter example, we are displaying popular football clubs names in listview. So we can multiple select or deselect list items to perform some operations.

List<String> listPopularFootballClubs = [];

@override
void initState() {
super.initState();
listPopularFootballClubs = [
‘Real Madrid’,
‘Barcelona’,
‘Bayern Munich’,
‘Manchester United’,
‘Paris Saint-German’,
‘Juventus’,
‘Cheslea’,
‘Liverpool’,
‘Manchester City’
];
}

Initialize Multi Select List Controller

We need to set multi select list controller disable when zero list item is selected. We must specify our listview data length in multi select controller.

MultiSelectController myMultiSelectController = MultiSelectController();

@override
void initState() {
super.initState();
myMultiSelectController.disableEditingWhenNoneSelected = true;
myMultiSelectController.set(listPopularFootballClubs.length);
}

Display Options in App Bar

We are displaying two options in flutter app bar: Select All and Delete. Using select all icon, we can select all items in our listview. Using delete icon, we can delete selected data from listview.

AppBar(
title: Text(‘Flutter Multi Select List Items’),
actions: (myMultiSelectController.isSelecting)
? <Widget>[
IconButton(
icon: Icon(Icons.select_all),
onPressed: selectAllItems,
),
IconButton(
icon: Icon(Icons.delete),
onPressed: deleteItems,
)
]
: <Widget>[]
),

Select All Items

void selectAllItems() {
setState(() {
myMultiSelectController.toggleAll();
});
}

Delete Selected Items

void deleteItems() {
var list = myMultiSelectController.selectedIndexes;
list.sort((b, a) => a.compareTo(b));
list.forEach((element) {
listPopularFootballClubs.removeAt(element);
});

setState(() {
myMultiSelectController.set(listPopularFootballClubs.length);
});
}

Flutter Multi Select List View

ListView.builder(
itemCount: listPopularFootballClubs.length,
itemBuilder: (context, index) {
return Container(
margin: EdgeInsets.symmetric(horizontal: 15, vertical: 8),
height: 90,
decoration: BoxDecoration(
color: Colors.transparent,
borderRadius: BorderRadius.circular(10),
),
child: InkWell(
onTap: () {},
child: Container(
child: MultiSelectItem(
isSelecting: myMultiSelectController.isSelecting,
onSelected: () {
setState(() {
myMultiSelectController.toggle(index);
});
},
child: Card(
color: myMultiSelectController.isSelected(index)
? Colors.grey.shade400
: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(7)),
),
child: Center(
child: Text(listPopularFootballClubs[index],
style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold)),
),
),
)
),
),
);
},
),