multi_select_item #

Multi select view item controller for GridView and ListView in Flutter

Getting Started #

For this to work. You need to write First define the controller first

MultiSelectController controller = new MultiSelectController();

Then set the controller length from your list length

//your list here, can be what ever you want.
mainList.add({"key": "1"});
mainList.add({"key": "2"});
mainList.add({"key": "3"});
mainList.add({"key": "4"});

controller.set(mainList.length);

Finally you can use it with list builder. For this plugin to work, you need to provide the MultiSelectItem widget with isSelecting parameter and onSelected parameter.

the isSelecting parameter will be used to tell the widget from the controller wether it's in multi selecting mode or not.
the onSelected parameter will be used to select the item that is selected by the user.

So in basic, it will look like this:

ListView.builder(
  itemCount: mainList.length,
  itemBuilder: (context, index) {
    return MultiSelectItem(
      isSelecting: controller.isSelecting,
      
      //the function that will be called when item is selected
      onSelected: () {
        setState(() {
          controller.toggle(index);
        });
      },
      child: Container(
        child: ListTile(
          title: new Text("Title ${mainList[index]['key']}"),
          subtitle: new Text("Description ${mainList[index]['key']}"),
        ),
        
        //change color based on wether the id is selected or not.
        decoration: controller.isSelected(index)
            ? new BoxDecoration(color: Colors.grey[300])
            : new BoxDecoration(),
      ),
    );
  },
),

Now you can multi select and get the selected indexes:

print(controller.selectedIndexes.toString());

Changing List #

If you ever change the list wether adding or removing item in it, don't forget to call set() with setState() and pass in your list's length to update the controller.

mainList.add({"key": mainList.length + 1});

setState(() {
  controller.set(mainList.length);
});

Removing Item from List #

Removing item can be tricky. When we select items, it will store the index in selectedIndexes list, but it will order by last selected. As such, it will cause error if we just loop through the list and delete one by one. To avoid this, reorder the list from biggest id to smallest id first and then delete one by one.

var list = controller.selectedIndexes;
list.sort((b, a) =>
    a.compareTo(b)); //reoder from biggest number, so it wont error
list.forEach((element) {
  mainList.removeAt(element);
});

setState(() {
  controller.set(mainList.length);
});