Crafting Multiselection Lists in Flutter

Crafting Multiselection Lists in Flutter

The ability to select multiple items from a list is an essential feature for many applications. Whether selecting users for a team, products for a purchase order, or elements for a report, multiselection lists come in handy. Fortunately, in Flutter, it’s easy to craft a multiselection list using the ListView, Checkbox, and ConfirmButton widgets, as we’ll see.

Defining The Data Model

Before coding out the multiselection list, we need to define a data model that contains the list items. This data model should contain properties that represent the list item labels and values, along with a boolean flag which indicates whether the item has been selected. In the following example, we’re defining a simple ColorModel class that holds color name and code:

class ColorModel {
  String name;
  String code;
  bool isSelected;

  ColorModel({this.name, this.code, this.isSelected});
}

Creating a List of Colors

Now that we have a data model, we can create a List of ColorModels representing some colors:

List colors = [
  ColorModel(name: 'Red', code: '#FF0000', isSelected: false),
  ColorModel(name: 'Green', code: '#00FF00', isSelected: false),
  ColorModel(name: 'Blue', code: '#0000FF', isSelected: false),
  ColorModel(name: 'Purple', code: '#800080', isSelected: false),
  ColorModel(name: 'Aqua', code: '#00FFFF', isSelected: false),
  ColorModel(name: 'Lime', code: '#00FF00', isSelected: false)
];

Crafting the Multiselection List

To create the multiselection list, we’ll first wrap the ListView widget around the colors list. This allows us to easily view and select the colors:

ListView.builder(
  itemCount: colors.length,
  itemBuilder: (context, index) => new CheckboxListTile(
    title: Text(colors[index].name),
    value: colors[index].isSelected,
    onChanged: (bool value) {
      setState(() {
        colors[index].isSelected = value;
      });
    }
  ),
)

Confirming the Selection

Once the user has selected the items, they can confirm their selection by tapping the ConfirmButton widget. This widget contains a callback function which returns an array of selected items:

ConfirmButton(
  onSelected: (List selectedItems) {
    // Process the selected items
  },
)

That’s all there is to it! With only a few lines of code, we’ve created a multiselection list that allows users to select multiple items from a list.