You can do it by using custom widget like:
class MultiSelectDialogItem<V> { const MultiSelectDialogItem(this.value, this.label); final V value; final String label; } class MultiSelectDialog<V> extends StatefulWidget { MultiSelectDialog({Key key, this.items, this.initialSelectedValues}) : super(key: key); final List<MultiSelectDialogItem<V>> items; final Set<V> initialSelectedValues; @override State<StatefulWidget> createState() => _MultiSelectDialogState<V>(); } class _MultiSelectDialogState<V> extends State<MultiSelectDialog<V>> { final _selectedValues = Set<V>(); void initState() { super.initState(); if (widget.initialSelectedValues != null) { _selectedValues.addAll(widget.initialSelectedValues); } } void _onItemCheckedChange(V itemValue, bool checked) { setState(() { if (checked) { _selectedValues.add(itemValue); } else { _selectedValues.remove(itemValue); } }); } void _onCancelTap() { Navigator.pop(context); } void _onSubmitTap() { Navigator.pop(context, _selectedValues); } @override Widget build(BuildContext context) { return AlertDialog( title: Text('Select animals'), contentPadding: EdgeInsets.only(top: 12.0), content: SingleChildScrollView( child: ListTileTheme( contentPadding: EdgeInsets.fromLTRB(14.0, 0.0, 24.0, 0.0), child: ListBody( children: widget.items.map(_buildItem).toList(), ), ), ), actions: <Widget>[ FlatButton( child: Text('CANCEL'), onPressed: _onCancelTap, ), FlatButton( child: Text('OK'), onPressed: _onSubmitTap, ) ], ); } Widget _buildItem(MultiSelectDialogItem<V> item) { final checked = _selectedValues.contains(item.value); return CheckboxListTile( value: checked, title: Text(item.label), controlAffinity: ListTileControlAffinity.leading, onChanged: (checked) => _onItemCheckedChange(item.value, checked), ); } }
After that use it as below:
void _showMultiSelect(BuildContext context) async { final items = <MultiSelectDialogItem<int>>[ MultiSelectDialogItem(1, 'Dog'), MultiSelectDialogItem(2, 'Cat'), MultiSelectDialogItem(3, 'Mouse'), ]; final selectedValues = await showDialog<Set<int>>( context: context, builder: (BuildContext context) { return MultiSelectDialog( items: items, initialSelectedValues: [1, 3].toSet(), ); }, ); print(selectedValues); }
[![enter image description here][1]][1]

[1]: https://i.stack.imgur.com/hvt8i.png

I don't think that a widget like that currently exists in Flutter, but you can build one yourself.
On mobile phones with limited screen space it would probably make sense to display a dialog with a submit button, like [this native Android dialog][1].
Here is a rough sketch how to implement such a dialog in less than 100 lines of code:
class MultiSelectDialogItem<V> { const MultiSelectDialogItem(this.value, this.label); final V value; final String label; } class MultiSelectDialog<V> extends StatefulWidget { MultiSelectDialog({Key key, this.items, this.initialSelectedValues}) : super(key: key); final List<MultiSelectDialogItem<V>> items; final Set<V> initialSelectedValues; @override State<StatefulWidget> createState() => _MultiSelectDialogState<V>(); } class _MultiSelectDialogState<V> extends State<MultiSelectDialog<V>> { final _selectedValues = Set<V>(); void initState() { super.initState(); if (widget.initialSelectedValues != null) { _selectedValues.addAll(widget.initialSelectedValues); } } void _onItemCheckedChange(V itemValue, bool checked) { setState(() { if (checked) { _selectedValues.add(itemValue); } else { _selectedValues.remove(itemValue); } }); } void _onCancelTap() { Navigator.pop(context); } void _onSubmitTap() { Navigator.pop(context, _selectedValues); } @override Widget build(BuildContext context) { return AlertDialog( title: Text('Select animals'), contentPadding: EdgeInsets.only(top: 12.0), content: SingleChildScrollView( child: ListTileTheme( contentPadding: EdgeInsets.fromLTRB(14.0, 0.0, 24.0, 0.0), child: ListBody( children: widget.items.map(_buildItem).toList(), ), ), ), actions: <Widget>[ FlatButton( child: Text('CANCEL'), onPressed: _onCancelTap, ), FlatButton( child: Text('OK'), onPressed: _onSubmitTap, ) ], ); } Widget _buildItem(MultiSelectDialogItem<V> item) { final checked = _selectedValues.contains(item.value); return CheckboxListTile( value: checked, title: Text(item.label), controlAffinity: ListTileControlAffinity.leading, onChanged: (checked) => _onItemCheckedChange(item.value, checked), ); } }
You can use it like this:
void _showMultiSelect(BuildContext context) async { final items = <MultiSelectDialogItem<int>>[ MultiSelectDialogItem(1, 'Dog'), MultiSelectDialogItem(2, 'Cat'), MultiSelectDialogItem(3, 'Mouse'), ];
final selectedValues = await showDialog<Set<int>>( context: context, builder: (BuildContext context) { return MultiSelectDialog( items: items, initialSelectedValues: [1, 3].toSet(), ); }, );
print(selectedValues); }
<img src="https://i.stack.imgur.com/bQi9o.png" width="250">

[1]: http://i2.wp.com/www.androidtutorialpoint.com/wp-content/uploads/2016/06/list.png