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:

  1. Multi-Functional Dropdown Widget: Provides a versatile dropdown widget capable of handling both single and multi-selection modes.
  2. Customizable Display: Allows customization of item display using a displayText function, including custom item styling using an ItemCustomizer.
  3. Initial Values: Supports setting initial values for single or multi-selection mode.
  4. Hint Text: Includes a hint text option for the dropdown.
  5. Dynamic Search: Implements dynamic search functionality for filtering items in the dropdown based on user input.
  6. Header and Footer Widgets: Supports adding header and footer widgets to the dropdown for additional customization.
  7. Dropdown Icon: Includes an option to customize the dropdown icon.
  8. Dimensions and Styling: Offers flexibility in setting dropdown width, height, decoration, and field radius for styling.
  9. Accessibility: Provides keyboard navigation and accessibility features for improved user experience.
  10. 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:

  1. 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
    
  2. 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});
}

Buy Me A Coffee

Additional information

Developer: Baqar Naqvi Email: naqvibaqar74@gmail.com