The multi_functional_dropdown package provides a versatile MultiDropdownDialog widget for Flutter, offering extensive customization options for dropdown functionality. It supports both multi-selection and single-selection modes, allowing users to specify hint text, initial values, customize item display and styling, perform dynamic search within the dropdown, include header and footer widgets.
Preview
Selection mode: single
Selection mode: multi
Features
The multi_functional_dropdown package in Flutter offers the following features:
- Multi-Functional Dropdown Widget: Provides a versatile dropdown widget capable of handling both single and multi-selection modes.
- Customizable Display: Allows customization of item display using a displayText function, including custom item styling using an ItemCustomizer.
- Initial Values: Supports setting initial values for single or multi-selection mode.
- Hint Text: Includes a hint text option for the dropdown.
- Dynamic Search: Implements dynamic search functionality for filtering items in the dropdown based on user input.
- Header and Footer Widgets: Supports adding header and footer widgets to the dropdown for additional customization.
- Dropdown Icon: Includes an option to customize the dropdown icon.
- Dimensions and Styling: Offers flexibility in setting dropdown width, height, decoration, and field radius for styling.
- Accessibility: Provides keyboard navigation and accessibility features for improved user experience.
- Performance Optimization: Optimized for performance with efficient item filtering and rendering, ensuring smooth interaction even with large datasets.
Overall, the multi_functional_dropdown
package combines functionality, customization, and performance optimization to enhance dropdown usage in Flutter applications.
Getting started
To use the multi_functional_dropdown package in your Flutter project, follow these steps:
-
Add Dependency: Add the multi_functional_dropdown package as a dependency in your project's
pubspec.yaml
file:dependencies: multi_functional_dropdown: ^0.0.7 # Use the latest version
-
Import Package: Import the package in your Dart code:
import 'package:multi_functional_dropdown/multi_functional_dropdown.dart';
Usage
Use the MultiDropdownDialog widget to create a multi-functional dropdown:
//SelectionType.single
List<Map<String, String>> itemsList = [
{'id': '1', 'name': 'Apple'},
{'id': '2', 'name': 'Mango'},
{'id': '3', 'name': 'Grapes'},
{'id': '4', 'name': 'Banana'},
];
MultiDropdownDialog<Map<String, String>>(
hint: 'Select a fruit',
fillColor: Colors.white,
borderColor: Colors.grey,
itemsList: itemsList,
displayText: (item) {
return item['name'].toString();
},
onChanged: (selectedItem) {
},
),
//SelectionType.multi
List<Person> personList = [
Person(name: 'Alice', age: 30),
Person(name: 'Bob', age: 25),
Person(name: 'Charlie', age: 40),
];
MultiDropdownDialog<Person>(
hint: 'Select Names',
fillColor: Colors.white,
borderColor: Colors.grey,
itemsList: personList,
displayText: (item) {
print("ITEM $item");
return item.name.toString();
},
onChanged: (selectedItem) {
print('Selected Person: ${selectedItem}');
},
selectionType: SelectionType.multi,
)
class Person {
final String name;
final int age;
Person({required this.name, required this.age});
}
Additional information
Developer: Baqar Naqvi Email: naqvibaqar74@gmail.com