Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

new option dropdown below menu as described in #278 #279

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

new option dropdown below menu as described in #278 #279

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
829ac28
Added the Option dropdownOnlyBeneathButton to DropdownButton2, which …
hlvs-apps May 16, 2024
fb4a2b4
Renamed dropdownOnlyBeneathButton to dropdownOnlyBelowButton, added D…
hlvs-apps May 17, 2024
511b546
added the dropdownOnlyBelowButton option to DropdownButtonFormField2
hlvs-apps May 19, 2024
74f998e
Merge branch 'AhmedLSayed9:master' into Dropdown-Below-PR1
hlvs-apps May 28, 2024
0273893
Fixed bug with dropdownOnlyBelowButton: menu didn't extend to max. po…
hlvs-apps May 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 31 additions & 29 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,8 @@ customize to your needs.
## Features

- Dropdown menu always open below the button "as long as it's possible otherwise it'll open to the
end of the screen" and you can edit its position by using the offset parameter.
end of the screen" and you can edit its position by using the offset and dropdownOnlyBelowButton
parameter.
- You can control how (button, button's icon, dropdown menu and menu items) will be displayed "read
Options below".
- You can align (hint & value) and customize them.
Expand Down Expand Up @@ -65,34 +66,35 @@ customize to your needs.

### DropdownButton2:

| Option | Description | Type | Required |
| -------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | -------------------------- | :------: |
| [items](https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownButton2/items.html) | The list of items the user can select | List<DropdownItem<T>> | Yes |
| [selectedItemBuilder](https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownButton2/selectedItemBuilder.html) | A builder to customize how the selected item will be displayed on the button | DropdownButtonBuilder | No |
| [valueListenable](https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownButton2/valueListenable.html) | A [ValueListenable] that represents the value of the currently selected [DropdownItem]. | ValueListenable<T?>? | No |
| [multiValueListenable](https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownButton2/multiValueListenable.html) | A [ValueListenable] that represents a list of the currently selected [DropdownItem]s | ValueListenable<List\<T>>? | No |
| [hint](https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownButton2/hint.html) | The placeholder displayed before the user choose an item | Widget | No |
| [disabledHint](https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownButton2/disabledHint.html) | The placeholder displayed if the dropdown is disabled | Widget | No |
| [onChanged](https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownButton2/onChanged.html) | Called when the user selects an item | ValueChanged<T?> | No |
| [onMenuStateChange](https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownButton2/onMenuStateChange.html) | Called when the dropdown menu opens or closes | OnMenuStateChangeFn | No |
| [style](https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownButton2/style.html) | The text style to use for text in the dropdown button and the dropdown menu | TextStyle | No |
| [underline](https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownButton2/underline.html) | The widget to use for drawing the drop-down button's underline | Widget | No |
| [isDense](https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownButton2/isDense.html) | Reduce the button's height | bool | No |
| [isExpanded](https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownButton2/isExpanded.html) | Makes the button's inner contents expanded (set true to avoid long text overflowing) | bool | No |
| [alignment](https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownButton2/alignment.html) | Defines how the hint or the selected item is positioned within the button | AlignmentGeometry | No |
| [buttonStyleData](https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownButton2/buttonStyleData.html) | Used to configure the theme of the button | ButtonStyleData | No |
| [iconStyleData](https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownButton2/iconStyleData.html) | Used to configure the theme of the button's icon | IconStyleData | No |
| [dropdownStyleData](https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownButton2/dropdownStyleData.html) | Used to configure the theme of the dropdown menu | DropdownStyleData | No |
| [menuItemStyleData](https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownButton2/menuItemStyleData.html) | Used to configure the theme of the dropdown menu items | MenuItemStyleData | No |
| [dropdownSearchData](https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownButton2/dropdownSearchData.html) | Used to configure searchable dropdowns | DropdownSearchData | No |
| [dropdownSeparator](https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownButton2/dropdownSeparator.html) | Adds separator widget to the dropdown menu | DropdownSeparator | No |
| [customButton](https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownButton2/customButton.html) | Uses custom widget like icon,image,etc.. instead of the default button | Widget | No |
| [openWithLongPress](https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownButton2/openWithLongPress.html) | Opens the dropdown menu on long-pressing instead of tapping | bool | No |
| [barrierDismissible](https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownButton2/barrierDismissible.html) | Whether you can dismiss this route by tapping the modal barrier | bool | No |
| [barrierColor](https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownButton2/barrierColor.html) | The color to use for the modal barrier. If this is null, the barrier will be transparent | Color | No |
| [barrierLabel](https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownButton2/barrierLabel.html) | The semantic label used for a dismissible barrier | String | No |
| [barrierCoversButton](https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownButton2/barrierCoversButton.html) | Specifies whether the modal barrier should cover the dropdown button or not. | bool | No |
| [openDropdownListenable](https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownButton2/openDropdownListenable.html) | A [Listenable] that can be used to programmatically open the dropdown menu. | Listenable? | No |
| Option | Description | Type | Required |
|------------------------------------------------------------------------------------------------------------------------------------------------| ---------------------------------------------------------------------------------------- | -------------------------- | :------: |
| [items](https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownButton2/items.html) | The list of items the user can select | List<DropdownItem<T>> | Yes |
| [selectedItemBuilder](https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownButton2/selectedItemBuilder.html) | A builder to customize how the selected item will be displayed on the button | DropdownButtonBuilder | No |
| [valueListenable](https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownButton2/valueListenable.html) | A [ValueListenable] that represents the value of the currently selected [DropdownItem]. | ValueListenable<T?>? | No |
| [multiValueListenable](https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownButton2/multiValueListenable.html) | A [ValueListenable] that represents a list of the currently selected [DropdownItem]s | ValueListenable<List\<T>>? | No |
| [hint](https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownButton2/hint.html) | The placeholder displayed before the user choose an item | Widget | No |
| [disabledHint](https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownButton2/disabledHint.html) | The placeholder displayed if the dropdown is disabled | Widget | No |
| [onChanged](https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownButton2/onChanged.html) | Called when the user selects an item | ValueChanged<T?> | No |
| [onMenuStateChange](https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownButton2/onMenuStateChange.html) | Called when the dropdown menu opens or closes | OnMenuStateChangeFn | No |
| [style](https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownButton2/style.html) | The text style to use for text in the dropdown button and the dropdown menu | TextStyle | No |
| [underline](https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownButton2/underline.html) | The widget to use for drawing the drop-down button's underline | Widget | No |
| [isDense](https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownButton2/isDense.html) | Reduce the button's height | bool | No |
| [isExpanded](https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownButton2/isExpanded.html) | Makes the button's inner contents expanded (set true to avoid long text overflowing) | bool | No |
| [alignment](https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownButton2/alignment.html) | Defines how the hint or the selected item is positioned within the button | AlignmentGeometry | No |
| [buttonStyleData](https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownButton2/buttonStyleData.html) | Used to configure the theme of the button | ButtonStyleData | No |
| [iconStyleData](https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownButton2/iconStyleData.html) | Used to configure the theme of the button's icon | IconStyleData | No |
| [dropdownStyleData](https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownButton2/dropdownStyleData.html) | Used to configure the theme of the dropdown menu | DropdownStyleData | No |
| [menuItemStyleData](https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownButton2/menuItemStyleData.html) | Used to configure the theme of the dropdown menu items | MenuItemStyleData | No |
| [dropdownSearchData](https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownButton2/dropdownSearchData.html) | Used to configure searchable dropdowns | DropdownSearchData | No |
| [dropdownSeparator](https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownButton2/dropdownSeparator.html) | Adds separator widget to the dropdown menu | DropdownSeparator | No |
| [customButton](https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownButton2/customButton.html) | Uses custom widget like icon,image,etc.. instead of the default button | Widget | No |
| [openWithLongPress](https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownButton2/openWithLongPress.html) | Opens the dropdown menu on long-pressing instead of tapping | bool | No |
| [barrierDismissible](https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownButton2/barrierDismissible.html) | Whether you can dismiss this route by tapping the modal barrier | bool | No |
| [barrierColor](https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownButton2/barrierColor.html) | The color to use for the modal barrier. If this is null, the barrier will be transparent | Color | No |
| [barrierLabel](https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownButton2/barrierLabel.html) | The semantic label used for a dismissible barrier | String | No |
| [barrierCoversButton](https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownButton2/barrierCoversButton.html) | Specifies whether the modal barrier should cover the dropdown button or not. | bool | No |
| [openDropdownListenable](https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownButton2/openDropdownListenable.html) | A [Listenable] that can be used to programmatically open the dropdown menu. | Listenable? | No |
| [dropdownOnlyBelowButton](https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownButton2/dropdownOnlyBelowButton.html) | Forces the dropdown menu to be only displayed beneath the button. | bool | No |

#### Subclass ButtonStyleData:

Expand Down
17 changes: 17 additions & 0 deletions packages/dropdown_button2/lib/src/dropdown_button2.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,17 @@ import 'package:flutter/services.dart';
import 'seperated_sliver_child_builder_delegate.dart';

part 'dropdown_style_data.dart';

part 'dropdown_route.dart';

part 'dropdown_menu.dart';

part 'dropdown_menu_item.dart';

part 'dropdown_menu_separators.dart';

part 'enums.dart';

part 'utils.dart';

const Duration _kDropdownMenuDuration = Duration(milliseconds: 300);
Expand Down Expand Up @@ -122,6 +128,7 @@ class DropdownButton2<T> extends StatefulWidget {
this.barrierLabel,
this.barrierCoversButton = true,
this.openDropdownListenable,
this.dropdownOnlyBelowButton = false,
// When adding new arguments, consider adding similar arguments to
// DropdownButtonFormField.
}) : assert(
Expand Down Expand Up @@ -163,6 +170,7 @@ class DropdownButton2<T> extends StatefulWidget {
this.barrierCoversButton = true,
this.barrierLabel,
this.openDropdownListenable,
this.dropdownOnlyBelowButton = false,
required InputDecoration inputDecoration,
required bool isEmpty,
required bool isFocused,
Expand Down Expand Up @@ -383,6 +391,12 @@ class DropdownButton2<T> extends StatefulWidget {
/// ```
final Listenable? openDropdownListenable;

/// If set, the dropdown menu will only be displayed below the button,
/// even if it means to make the menu scrollable.
///
/// Defaults to false
final bool dropdownOnlyBelowButton;

final InputDecoration? _inputDecoration;

final bool _isEmpty;
Expand Down Expand Up @@ -592,6 +606,7 @@ class _DropdownButton2State<T> extends State<DropdownButton2<T>>
menuItemStyle: _menuItemStyle,
searchData: _searchData,
dropdownSeparator: separator,
dropdownOnlyBelowButton: widget.dropdownOnlyBelowButton,
);

_isMenuOpen.value = true;
Expand Down Expand Up @@ -943,6 +958,7 @@ class DropdownButtonFormField2<T> extends FormField<T> {
Widget? customButton,
bool openWithLongPress = false,
bool barrierDismissible = true,
bool dropdownOnlyBelowButton = false,
Color? barrierColor,
String? barrierLabel,
Listenable? openDropdownListenable,
Expand Down Expand Up @@ -1025,6 +1041,7 @@ class DropdownButtonFormField2<T> extends FormField<T> {
inputDecoration: effectiveDecoration,
isEmpty: isEmpty,
isFocused: Focus.of(context).hasFocus,
dropdownOnlyBelowButton: dropdownOnlyBelowButton,
),
),
);
Expand Down
Loading