ff_drop_down_list #

A customizable dropdown widget supporting single/multiple selection, integrated search in a bottom sheet, generic support for flexible, type-safe handling of custom data.

Forked from MindInventory/drop_down_list to optimize for FlutterFlow usage.

Preview #

drop_down_with_multiple_selection

drop_down_with_single_selection

Basic Usage #

Import it to your project file

import 'package:ff_drop_down_list/ff_drop_down_list.dart';

And add it in its most basic form like it:

DropDown<String>(
  data: <SelectedListItem<String>>[
    SelectedListItem<String>(data: 'Tokyo'),
    SelectedListItem<String>(data: 'New York'),
    SelectedListItem<String>(data: 'London'),
  ],
  options: DropDownOptions(
    onSingleSelected: (SelectedListItem<String> selectedItem) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(
          content: Text(selectedItem.data),
        ),
      );
    },
  ),
).show(context);

Documentation #

`ff_drop_down_list` Classes #

Class	Description
`DropDown<T>`	The main class to build and display a dropdown.
`DropDownOptions<T>`	The options on how the dropdown should behave.
`DropDownStyle`	The style on how the dropdown should look.
`SelectedListItem<T>`	The datatype for each dropdown item.

`DropDown<T>` Class Parameters #

Parameter	Description
`List<SelectedListItem<T>>? data`	The data for the dropdown.
`List<T>? unbuiltData`	The unbuilt data for the dropdown. Only used if `data` is not provided.
`DropDownOptions<T>? options`	The options for the dropdown.
`DropDownStyle? style`	The style for the dropdown.
`DropDownStyleBuilder? styleBuilder`	A style builder to make a `DropDownStyle` if `style` is not already provided.

`DropDown<T>` Class Methods #

Method	Description
`void show(BuildContext context)`	Displays the dropdown menu as a modal bottom sheet.

`DropDownOptions<T>` Class Parameters #

Parameter	Default	Description
`bool enableMultipleSelection`	`false`	Enables single or multiple selection for the drop down list items.
`int? maxSelectedItems`		The maximum number of items that can be selected when `enableMultipleSelection` is `true`.
`VoidCallback? onMaxSelectionReached`		A callback function triggered when the maximum selection limit is reached.
`ItemSelectionCallback<T>? onSelected`		A callback function triggered when items are selected from the list.
`MultipleItemSelectionCallback<T>? onMultipleSelected`		A callback function triggered when multiple items are selected from the list.
`SingleItemSelectionCallback<T>? onSingleSelected`		A callback function triggered when a single item is selected from the list.
`ListItemBuilder<T>? listItemBuilder`		A function that takes an `index` and `dataItem` as a parameter and returns a custom widget.
`SearchDelegate<T>? searchDelegate`		A delegate used to configure the custom search functionality in the dropdown.
`bool searchOnEmpty`	`false`	Controls whether the search list will be queried when the query string is empty.
`ListSortDelegate<T>? listSortDelegate`		A delegate used to sort the list of items after every search.
`bool useRootNavigator`	`false`	Specifies whether a modal bottom sheet should be displayed using the root navigator.
`bool enableDrag`	`true`	Specifies whether the bottom sheet can be dragged up and down and dismissed by swiping downwards.
`bool isDismissible`	`true`	Specifies whether the bottom sheet will be dismissed when the user taps on the scrim.
`double initialSheetSize`	`0.7`	The initial fractional value of the parent container's height to use when displaying the `DropDown` widget.
`double minSheetSize`	`0.3`	The minimum fractional value of the parent container's height to use when displaying the `DropDown` widget.
`double maxSheetSize`	`0.9`	The maximum fractional value of the parent container's height to use when displaying the `DropDown` widget.
`BottomSheetListener? bottomSheetListener`		A listener that monitors events bubbling up from the `BottomSheet`.

`DropDownStyle` Class Parameters #

Parameter	Default	Description
`EdgeInsets? listPadding`	`EdgeInsets.zero`	The padding applied to the `ListView` that contains the dropdown items.
`Widget? listSeparator`	`Divider(color: listSeparatorColor, height: 0)`	The widget used as a separator between items in the dropdown list.
`Color? listSeparatorColor`	`BrightnessColor.bwa(alpha: 0.08)` ^{See Custom Color Models.}	Defines the color of the default list separator `Divider`.
`EdgeInsets? tileContentPadding`	`EdgeInsets.symmetric(horizontal: 20)`	The padding applied to the content of each `ListTile` in the dropdown list.
`Color? tileColor`	`Colors.transparent`	Defines the background color of each `ListTile` in the dropdown list.
`Color? selectedTileColor`	`Colors.transparent`	Defines the background color of each selected `ListTile` in the dropdown list.
`Widget selectedTileTrailingWidget`	`Icon(Icons.check_box)`	The widget displayed as a trailing icon when a list item is selected and when `enableMultipleSelection` is `true`.
`Widget unselectedTileTrailingWidget`	`Icon(Icons.check_box_outline_blank)`	The widget displayed as a trailing icon when a list item is not selected and when `enableMultipleSelection` is `true`.
`Color backgroundColor`	`Colors.transparent`	Sets the background color of the dropdown.
`ShapeBorder? border`	`RoundedRectangleBorder(borderRadius: BorderRadius.vertical(top: Radius.circular(24.0)))`	The border shape of the bottom sheet.
`EdgeInsets? padding`	`EdgeInsets.only(bottom: MediaQuery.of(context).padding.bottom)`	The padding applied to the dropdown container.
`EdgeInsets? headerPadding`	`EdgeInsets.only(left: 20.0, right: 20.0, top: 10.0)`	The padding applied to the dropdown header.
`Widget? headerWidget`		The widget displayed as the title of the bottom sheet.
`Widget? submitButtonChild`		Defines a custom widget to display as the child of the submit button when `enableMultipleSelection` is `true`.
`String submitButtonText`	`"Submit"`	Specifies the text displayed on the submit button when `submitButtonChild` is not provided and `enableMultipleSelection` is `true`.
`Widget? clearButtonChild`		Defines a custom widget to display as the child of the clear button when `enableMultipleSelection` is `true`.
`String clearButtonText`	`"Clear"`	Specifies the text displayed on the clear button when `clearButtonChild` is not provided `and enableMultipleSelection` is `true`.
`bool isSearchVisible`	`true`	Controls the visibility of the search widget.
`EdgeInsets? searchTextFieldPadding`	`EdgeInsets.all(10)`	The padding applied to the search text field.
`TextFormField? searchWidget`		Defines a custom widget to display the text box for searching.
`String searchHintText`	`"Search"`	Specifies the text displayed on the search widget as hint text.
`Color? searchFillColor`		The fill color for the search input field.
`Color? searchCursorColor`		The color of the cursor for the search input field.
`BorderRadius? searchBorderRadius`	`BorderRadius.circular(24.0)`	The border radius of the search input field.
`Widget? searchPrefixIcon`	`Icon(Icons.search)`	The prefix icon for the search input field.
`Color? searchPrefixColor`	`BrightnessColor.bwa(alpha: 0.5)`	The prefix icon color for the search input field.
`Widget? searchSuffixIcon`	`Icon(Icons.clear)`	The suffix icon for the search input field.
`Color? searchSuffixColor`	`BrightnessColor.bwa(alpha: 0.5)`	The suffix icon color for the search input field.
`bool searchAutofocus`	`false`	Controls whether the search input field will autofocus.
`bool isSelectAllVisible`	`false`	Controls the visibility of the "select all" widget when `enableMultipleSelection` is `true`.
`EdgeInsets? selectAllButtonPadding`	`EdgeInsets.zero`	The padding applied to the "select all" and "deselect all" TextButtons.
`Widget? selectAllButtonChild`		Defines a custom widget to display as the child of the selectAll text button when `enableMultipleSelection` and `isSelectAllVisible` is `true`.
`String selectAllButtonText`	`"Select All"`	Specifies the text displayed on the selectAll text button when `enableMultipleSelection` and `isSelectAllVisible` is `true`.
`Widget? deselectAllButtonChild`		Defines a custom widget to display as the child of the deSelectAll text button when `enableMultipleSelection` and `isSelectAllVisible` is `true`.
`String deselectAllButtonText`	`"Deselect All"`	Specifies the text displayed on the deSelectAll text button when `enableMultipleSelection` and `isSelectAllVisible` is `true`.

`SelectedListItem<T>` Class Parameters #

Parameter	Default	Description
`bool isSelected`	`false`	Indicates whether the item is selected.
`T data`		Tha data of the item.

Type Definitions #

Name	Definition	Description
`ItemSelectionCallback<T>`	`void Function(List<SelectedListItem<T>> selectedItems)`	A callback function that is invoked when items are selected.
`MultipleItemSelectionCallback<T>`	`void Function(List<SelectedListItem<T>> selectedItems)`	A callback function that is invoked when multiple items are selected.
`SingleItemSelectionCallback<T>`	`void Function(SelectedListItem<T> selectedItem)`	A callback function that is invoked when a single item is selected.
`ListItemBuilder<T>`	`Widget Function(int index, SelectedListItem<T> dataItem)`	A function type definition for building a widget for a specific list item.
`SearchDelegate<T>`	`List<SelectedListItem<T>> Function(String query, List<SelectedListItem<T>> dataItems)`	A function type definition for searching through a list of items based on the user's query.
`ListSortDelegate<T>`	`int Function(SelectedListItem<T> a, SelectedListItem<T> b)`	A function type definition for sorting through the list of items.
`BottomSheetListener`	`bool Function(DraggableScrollableNotification draggableScrollableNotification)`	A function type definition for handling notifications from a draggable bottom sheet.
`DropDownStyleBuilder`	`DropDownStyle Function(BuildContext context)`	A function type definition for building a `DropDownStyle`.

Custom `Color` Models #

These custom models can be used in any option that accepts a Color.

Name	Basic Usage	Description
`BrightnessColor`	`BrightnessColor(light: Colors.black, dark: Colors.white)`	A class extended from `Color` which allows a light and a dark color to be chosen to be rendered based on the theme brightness of the current `BuildContext`.
`ThemedColor`	`ThemedColor((ThemeData theme) => theme.primaryColor)`	A class extended from `Color` which allows for custom colors based on the theme of the current `BuildContext`.
`ContextualColor`	`ContextualColor((BuildContext context) => FlutterFlowTheme.of(context).primaryText)`	A class extended from `Color` which allows for custom colors based on the current `BuildContext`.

Model	Constructor	Description
`BrightnessColor`	`BrightnessColor({Color? light, Color? dark})`
	`BrightnessColor.alpha({Color? light, Color? dark, double alpha})`	Alias for `BrightnessColor(light: light.withValues(alpha: alpha), dark: dark.withValues(alpha: alpha))`
	`BrightnessColor.inverted({Color? light})`	Alias for `BrightnessColor(light: light, dark: light.inverted)`
	`BrightnessColor.inverted({Color? dark})`	Alias for `BrightnessColor(light: dark.inverted, dark: dark)`
	`BrightnessColor.invertedOnDark(Color light)`	Alias for `BrightnessColor.inverted(light: light)`
	`BrightnessColor.invertedOnLight(Color dark)`	Alias for `BrightnessColor.inverted(dark: dark)`
	`BrightnessColor.bw()`	Alias for `BrightnessColor(light: Colors.black, dark: Colors.white)`
	`BrightnessColor.wb()`	Alias for `BrightnessColor(light: Colors.white, dark: Colors.black)`
	`BrightnessColor.bwa(double alpha)`	Alias for `BrightnessColor.alpha(light: Colors.black, dark: Colors.white, alpha: alpha)`
	`BrightnessColor.wba(double alpha)`	Alias for `BrightnessColor.alpha(light: Colors.white, dark: Colors.black, alpha: alpha)`
`ThemedColor`	`ThemedColor(Color? Function(ThemeData theme))`
`ContextualColor`	`ContextualColor(Color? Function(BuildContext context))`

Contribution #

Contributions to this project are welcome. Feel free to open issues and to submit pull requests for general fixes or improvements.

License #

ff_drop_down_list is MIT-licensed.

ff_drop_down_list 0.0.2
ff_drop_down_list: ^0.0.2 copied to clipboard

Metadata

ff_drop_down_list #

Preview #

Basic Usage #

Documentation #

`ff_drop_down_list` Classes #

`DropDown<T>` Class Parameters #

`DropDown<T>` Class Methods #

`DropDownOptions<T>` Class Parameters #

`DropDownStyle` Class Parameters #

`SelectedListItem<T>` Class Parameters #

Type Definitions #

Custom `Color` Models #

Contribution #

License #

← Metadata

Publisher

Weekly Downloads

Metadata

License

Dependencies

More

ff_drop_down_list 0.0.2 ff_drop_down_list: ^0.0.2 copied to clipboard

Metadata

ff_drop_down_list #

Preview #

Dropdown with a Multiple Selection #

Dropdown with a Single Selection #

Basic Usage #

Documentation #

ff_drop_down_list Classes #

DropDown<T> Class Parameters #

DropDown<T> Class Methods #

DropDownOptions<T> Class Parameters #

DropDownStyle Class Parameters #

SelectedListItem<T> Class Parameters #

Type Definitions #

Custom Color Models #

Contribution #

License #

← Metadata

Publisher

Weekly Downloads

Metadata

License

Dependencies

More

ff_drop_down_list 0.0.2
ff_drop_down_list: ^0.0.2 copied to clipboard

`ff_drop_down_list` Classes #

`DropDown<T>` Class Parameters #

`DropDown<T>` Class Methods #

`DropDownOptions<T>` Class Parameters #

`DropDownStyle` Class Parameters #

`SelectedListItem<T>` Class Parameters #

Custom `Color` Models #