DOCSEARCHbyAlgolia
Submit Docs

dropdown_search

repository·master·Indexed 18 days ago

https://github.com/salim-lachdhaf/dropdown_search

A highly customizable Flutter dropdown widget supporting searching, infinite scrolling, and multiple selection modes. It provides adaptive UI for Material and Cupertino platforms and works with both synchronous and asynchronous data sources. Key features include various popup modes (menu, dialog, autocomplete, bottom sheet), multi-selection constructors, and platform-aware styling via AdaptivePopupProps and AdaptiveMenuProps.

Tokens
7.7K
Snippets
25
Records
32
Agent score
55%

What's inside dropdown_search

  1. Choose a platform UI mode

    master

    The package provides different constructors to control the visual style of the dropdown based on the platform:

    • Material UI (Default): Use DropdownSearch<T>(...) or DropdownSearch<T>.multiSelection(...).
    • Cupertino UI: Use CupertinoDropdownSearch<T>(...) or CupertinoDropdownSearch<T>.multiSelection(...).
    • Adaptive UI: Use AdaptiveDropdownSearch<T>(...) or AdaptiveDropdownSearch<T>.multiSelection(...) to automatically pick the appropriate UI for the current platform.

    Tip: When using AdaptiveDropdownSearch, you can customize the PopupMode for each platform using AdaptivePopupProps.

    AdaptiveDropdownSearch<T>(
    popupProps: AdaptivePopupProps(
        cupertinoProps: CupertinoPopupProps.bottomSheet(),
        materialProps: PopupProps.dialog()
    ),
)

  2. Customize the layout of DropdownSearch

    master
    The DropdownSearch widget allows for extensive layout customization of both the dropdown container and its individual items. For specific implementation patterns and visual examples, refer to the project's example repository or the official API documentation on pub.dev.

  5. Customize iOS Launch Screen Assets

    master

    To change the launch screen image for the iOS version of your Flutter application, you can use one of two methods:

    1. Direct File Replacement: Replace the existing image files located in the example/ios/Runner/Assets.xcassets/LaunchImage.imageset/ directory with your own assets.
    2. Xcode Interface:
      • Open the iOS workspace using the command: open ios/Runner.xcworkspace.
      • In the Xcode Project Navigator, navigate to Runner/Assets.xcassets.
      • Drag and drop your desired images into the asset catalog to replace the current ones.
    open ios/Runner.xcworkspace

  6. Enable Infinite Scroll (Lazy Loading)

    master

    To implement infinite scrolling, declare infiniteScrollProps within your popupProps. You must also handle the loadProps in your items function to manage pagination (skipping and taking items from your data source).

    DropdownSearch<T>(
    items: (filter, loadProps) => _getDataFromAPI(filter, loadProps!.skip, loadProps!.take),
    popupProps: PopupProps.dialog(
        infiniteScrollProps: InfiniteScrollProps(
            loadProps: LoadProps(skip: 0, take: 10),
        ),
    ),
)

  7. Configure popup modes with PopupProps

    master

    Use PopupProps<T> to define how the dropdown's selection interface appears. You can choose between several modes using named constructors. Each mode provides a different UI pattern (e.g., a menu, a dialog, or a bottom sheet).

    Available modes:

    • .menu(): Displays a standard menu.
    • .autocomplete(): Displays an autocomplete-style interface.
    • .dialog(): Displays a centered dialog.
    • .bottomSheet(): Displays a bottom sheet.
    • .modalBottomSheet(): Displays a modal bottom sheet.

    Each constructor allows you to pass TextFieldProps for the search field and various other properties like itemBuilder, constraints, and onDismissed to customize the behavior and look of the popup.

    // Example: Using a dialog mode for single selection
PopupProps.dialog(
  title: Text('Select an item'),
  constraints: BoxConstraints(minWidth: 300, maxHeight: 400),
  itemBuilder: (context, index, item) => ListTile(title: Text(item.toString())),
);

  8. Use maintainBottomViewPadding to prevent UI shifts

    master

    When maintainBottomViewPadding is set to true, the SafeArea maintains the bottom MediaQueryData.viewPadding instead of the bottom MediaQueryData.padding.

    This is useful when an onscreen keyboard is displayed; it prevents the layout from visibly shifting or moving when the software keyboard opens, which is particularly helpful for layouts containing flexible widgets.

  9. Configure multi-selection popups with MultiSelectionPopupProps

    master

    Use MultiSelectionPopupProps<T> when you need to support multiple item selections. It extends the functionality of PopupProps by adding properties specifically for managing multiple items, such as onItemAdded, onItemRemoved, and checkBoxBuilder.

    Available modes:

    • .menu()
    • .autocomplete()
    • .dialog()
    • .bottomSheet()
    • .modalBottomSheet()

    Key multi-selection specific properties include:

    • onItemAdded: Callback when an item is selected.
    • onItemRemoved: Callback when an item is deselected.
    • checkBoxBuilder: A builder to customize the checkbox UI for each item.
    // Example: Using a bottom sheet for multi-selection with checkboxes
MultiSelectionPopupProps.bottomSheet(
  bottomSheetProps: BottomSheetProps( /* ... */ ),
  checkBoxBuilder: (context, value, item, isSelected) {
    return Checkbox(value: isSelected, onChanged: null);
  },
  onItemAdded: (item) => print('Added: $item'),
  onItemRemoved: (item) => print('Removed: $item'),
);

  10. Implement a simple single-selection dropdown

    master

    A basic implementation using a list of strings and the menu popup mode.

    DropdownSearch<String>(
  items: (f, cs) => ["Item 1", 'Item 2', 'Item 3', 'Item 4'],
  popupProps: PopupProps.menu(
    disabledItemFn: (item) => item == 'Item 3',
    fit: FlexFit.loose
  ),
),

  11. Implement a multi-selection dropdown

    master

    Use the .multiSelection constructor to allow users to select multiple items. You can use mode: Mode.CUSTOM and a dropdownBuilder to customize how the selected items are displayed in the closed state.

    DropdownSearch<String>.multiSelection(
  mode: Mode.CUSTOM,
  items: (f, cs) => ["Monday", 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
  dropdownBuilder: (ctx, selectedItem) => Icon(Icons.calendar_month_outlined, size: 54),
),

  12. Customize dropdown items with complex types

    master

    You can use tuples or custom objects as items. Use compareFn to define how items are compared for selection equality and itemBuilder within popupProps to customize the appearance of items in the list.

    DropdownSearch<(String, Color)>(
  clickProps: ClickProps(borderRadius: BorderRadius.circular(20)),
  mode: Mode.CUSTOM,
  items: (f, cs) => [
    ("Red", Colors.red),
    ("Black", Colors.black),
    ("Yellow", Colors.yellow),
    ('Blue', Colors.blue),
  ],
  compareFn: (item1, item2) => item1.$1 == item2.$1,
  popupProps: PopupProps.menu(
    menuProps: MenuProps(align: MenuAlign.bottomCenter),
    fit: FlexFit.loose,
    itemBuilder: (context, item, isDisabled, isSelected) => Padding(
      padding: const EdgeInsets.all(8.0),
      child: Text(item.$1, style: TextStyle(color: item.$2, fontSize: 16)),
    ),
  ),
  dropdownBuilder: (ctx, selectedItem) => Icon(Icons.face, color: selectedItem?.$2, size: 54),
),