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 is a function. The function will be called depending wether it's in multi selecting mode (isSelecting == true) or not.
- if isSelecting is true, then the function will be called when user tap on the MultiSelectItem widget
- if isSelecting is false, then the function will be called when user longtap on the MultiSelectItem widget

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 long-tapped/tapped
      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);
});

Keep in Selecting Mode #

Sometimes, you don't want to quit multi selecting mode even no item is selected. To do this, add and set disableEditingWhenNoneSelected to false.

controller.disableEditingWhenNoneSelected = false;
controller.set(mainList.length);

Enter Selecting Mode Manually #

You can enter selecting mode by changing parameter isSelecting of the controller to true.
Don't forget to use setState()!

setState(() {
  controller.isSelecting = true;
});