To select all options in a Flutter Multi Select Drop Down, you can use the selectAll
method provided by the MultiSelectFormField
class. Here's an example:
import 'package:flutter/material.dart';
import 'package:multi_select_flutter/multi_select_flutter.dart';
class MyWidget extends StatefulWidget {
@override
_MyWidgetState createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> {
List<String> _selectedOptions = [];
final List<String> _options = [
'Option 1',
'Option 2',
'Option 3',
'Option 4',
'Option 5'
];
final _multiSelectKey = GlobalKey<FormFieldState>();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Multi Select Drop Down'),
),
body: SingleChildScrollView(
child: Column(
children: [
MultiSelectFormField(
key: _multiSelectKey,
autovalidate: false,
chipDisplay: MultiSelectChipDisplay(
onTap: (value) => setState(() => _selectedOptions.remove(value)),
),
chipCheckmark: Icon(Icons.done),
dialogTitle: ('Select options'),
items: _options.map((option) => MultiSelectItem<String>(option, option)).toList(),
searchable: true,
validator: (value) => value == null || value.isEmpty ? 'Required' : null,
onSaved: (value) => setState(() => _selectedOptions = value),
),
RaisedButton(
child: Text('Select all'),
onPressed: () {
final formFieldState = _multiSelectKey.currentState;
if (formFieldState != null) {
formFieldState.save();
final allOptions = _options.map((option) => option).toList();
formFieldState.setState(() => _selectedOptions = allOptions);
}
},
),
Text('Selected options: ${_selectedOptions.join(', ')}'),
],
),
),
);
}
}
In this example, the MultiSelectFormField
widget is used to create the multi-select dropdown. The selectAll
method is called when the "Select all" button is pressed, which sets the state of the MultiSelectFormField
widget to have all options selected. The selected options are then displayed in a Text
widget.
Asked: 2021-07-25 11:00:00 +0000
Seen: 16 times
Last updated: Oct 24 '22