-
🙀 Open source is not easy, please give a Star ⭐ Please! I will update the code continuously according to your attention and personal time! -
🙀 If you want to receive an update message, you can watch it. If you have problems, please mention Issues.
-
Function introduction -
To do list -
Gif effect picture -
How to use -
Related Repository -
Related articles -
Donate developers
-
Custom dropdown header -
Custom dropdown header item -
Custom dropdown menu -
Custom dropdown menu animation -
Control dropdown menu show or hide
-
Because GZXDropDownMenu can only be used in Stack, its scalability is not strong enough -
Supports CustomScrollView and NestedScrollView -
..........
-
Meituan's code is in the example directory of this warehouse -
The code of Taobao is in Flutter Taobao
gzx_dropdown_menu : ^ three point one . zero
-
It is strongly recommended that you clone the warehouse first -
Then run to see the effect -
Open the gzx_dropdown_menu_test_page.dart file under the example project of this warehouse.
//Drop down menu header
GZXDropDownHeader ( //Drop down header items. At present, each item can only customize the displayed text, icon and icon size items : [ GZXDropDownHeaderItem (_dropDownHeaderItemStrings[ zero ]), GZXDropDownHeaderItem ( _dropDownHeaderItemStrings[ one ], iconData : Icons .keyboard_arrow_down, iconDropDownData : Icons .keyboard_arrow_up, ), GZXDropDownHeaderItem ( _dropDownHeaderItemStrings[ two ], style : TextStyle (color : Colors .green), iconData : Icons .arrow_upward, iconDropDownData : Icons .arrow_downward, ), GZXDropDownHeaderItem ( _dropDownHeaderItemStrings[ three ], iconData : Icons .filter_frames, iconSize : eighteen , ), ], //GZXDropDownHeader corresponds to the key of the first parent stack stackKey : _stackKey, //The controller is used to control the display or hiding of the menu controller : _dropdownMenuController, //When clicking the event of the header item, page jump or openEndDrawer can be performed here onItemTap : (index) { if (index == three ) { _dropdownMenuController. hide (); _scaffoldKey.currentState ! . openEndDrawer (); } }, //Height of head height : forty , //Head background color color : Colors .red, //Head border width borderWidth : one , //Head border color borderColor : Color ( 0xFFeeede6 ), //Division line height dividerHeight : twenty , //Split line color dividerColor : Color ( 0xFFeeede6 ), //Text Style style : TextStyle (color : Color ( 0xFF666666 ), fontSize : fourteen ), //Drop Down Text Style dropDownStyle : TextStyle ( fontSize : fourteen , color : Theme . of (context).primaryColor, ), //Icon size iconSize : twenty , //Icon Color iconColor : Color ( 0xFFafada7 ), //Icon color when pulling down iconDropDownColor : Theme . of (context).primaryColor, ),
//Pull down menu. Note that GZXDropDownMenu can only be in Stack at present. It will be improved later when time comes. It also supports CustomScrollView and NestedScrollView
GZXDropDownMenu ( //The controller is used to control the display or hiding of the menu controller : _dropdownMenuController, //Drop down menu to show or hide animation duration animationMilliseconds : three hundred , //Mask color after pull-down
//maskColor: Theme.of(context).primaryColor.withOpacity(0.5),
//maskColor: Colors.red.withOpacity(0.5), dropdownMenuChanging : (isShow, index) { setState (() { _dropdownMenuChange = '(in progress${ isShow ? 'Display' : 'Hide' }$ index )' ; print (_dropdownMenuChange); }); }, dropdownMenuChanged : (isShow, index) { setState (() { _dropdownMenuChange = '(already${ isShow ? 'Display' : 'Hide' }$ index )' ; print (_dropdownMenuChange); }); }, //Drop down menu is highly customized. You can display whatever you want, which is completely up to you. You just need to call _dropdownMenuController. hide() after selecting; that will do menus : [ GZXDropdownMenuBuilder ( dropDownHeight : forty * eight , dropDownWidget : _buildAddressWidget ((selectValue) { _dropDownHeaderItemStrings[ zero ] = selectValue; _dropdownMenuController. hide (); setState (() {}); })), GZXDropdownMenuBuilder ( dropDownHeight : forty * eight , dropDownWidget : _buildConditionListWidget (_brandSortConditions, (value) { _selectBrandSortCondition = value; _dropDownHeaderItemStrings[ one ] = _selectBrandSortCondition.name == 'All' ? 'Brand' : _selectBrandSortCondition.name; _dropdownMenuController. hide (); setState (() {}); })), GZXDropdownMenuBuilder ( dropDownHeight : forty * _distanceSortConditions.length, dropDownWidget : _buildConditionListWidget (_distanceSortConditions, (value) { _selectDistanceSortCondition = value; _dropDownHeaderItemStrings[ two ] = _selectDistanceSortCondition.name; _dropdownMenuController. hide (); setState (() {}); })), ], ),