Ask Your Question

Revision history [back]

click to hide/show revision 1
initial version

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.