This is a multiple selection dropdown with select all option.
Features
multiple selection, select all option
Properties
A widget that provides a multi-select dropdown.
items is the list of available options.
initialSelectedValues is the list of initially selected values.
hint is the text displayed when no items are selected.
onChanged is called when the selected items change.
colorHeading is the color of the label text.
colorPlaceholder is the color of the placeholder text.
colorDropdownIcon is the color of the dropdown icon.
borderColor is the color of the border.
radius is the border radius of the dropdown.
borderWidth is the border width of the dropdown.
selectAllflag is the bool for giving 'Select Al'.
isMultiSelect is the Flag to determine if multi-select is allowed.
scrollbar is the Flag to determine if scrollbar is allowed.
scrollbartrack is the Flag to determine if scrollbar is allowed.
boxLabel is the text displayed along with the box.
listTitle is the item list title.
listTitleColor is the flag to change the color of list title.
listTitleFontSize is the flag to set the FontSize of the list title.
useRadioButton is the flag to convert checkbox to radio button.
Getting started
Add multiselect_dropdown_with_select_all: to your pubspec.yaml dependencies then run flutter pub get
Add from pub Stable
dependencies:
multiselect_dropdown_with_select_all:
Usage
import 'package:flutter/material.dart';
import 'multi_select_dropdown.dart'; // Import the file with the custom widget
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Multi-Select Dropdown Example')),
body: MultiSelectForm(),
),
);
}
}
class MultiSelectForm extends StatefulWidget {
@override
_MultiSelectFormState createState() => _MultiSelectFormState();
}
class _MultiSelectFormState extends State<MultiSelectForm> {
final _formKey = GlobalKey<FormState>();
List<String> items = ['Option 1', 'Option 2', 'Option 3'];
List<String> selectedItems = [];
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(16.0),
child: Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
MultiSelectDropdown(
items: items,
initialSelectedItems: selectedItems,
hint: 'Select options',
listTitle: 'Items',
listTitleFontSize: 23,
listTitleColor: Colors.green,
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
if (_formKey.currentState!.validate()) {
// Form is valid, handle submission
print('Selected Items: $selectedItems');
}
},
child: Text('Submit'),
),
],
),
),
);
}
}