multi_select_item 1.0.3

Flutter Android iOS

Multi select view item controller for GridView and ListView in Flutter

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;
});

MultiSelectItem Parameters #

MultiSelectItem is a widget that handles the multi selecting. Wrap this widget inside listbuilder item.

//child widget to pass
final Widget child;

//variable to tell the MultiSelectItem wether it's in selecting mode or not.
final bool isSelecting;

//function that will be called based on isSelecting variable.
//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 long tap on the MultiSelectItem widget
final VoidCallback onSelected;

MultiSelectController Parameters #

MultiSelectController is a controller that hadles the state of the multi selecting.

//list of selected indexes
List<int> selectedIndexes;

//the state wether it's in multi selecting mode or not
bool isSelecting = false;

//if set to false, it will not get out from multi selecting mode if no item are selected
bool disableEditingWhenNoneSelected = true;

MultiSelectController Functions #

FunctionReturn TypeParameterDescription
setvoidset the controller length
isSelectedboolint ireturns if the specified id is being selected or not
selectvoidint iselect specified id
deselectvoidint ideselect specified id
togglevoidint itoggle specified id
selectAllvoidselect all
deselectAllvoiddeselect all
toggleAllvoidselect all if not all list item is selected. deselect all if all list item is selected.
8
likes
100
pub points
69%
popularity

Multi select view item controller for GridView and ListView in Flutter

Repository (GitHub)
View/report issues

Documentation

API reference

Uploader

ahmadfatih.id@gmail.com

License

MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on multi_select_item