Skip to content

GanZhiXiong/gzx_dropdown_menu

Folders and files

Name Name
Last commit message
Last commit date

Latest commit

 

History

93 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

gzx_dropdown_menu

 Pub Package  GitHub Stars  GitHub Forks  GitHub Issues  GitHub License

This is a powerful lightweight Flutter customization Drop down Filter Menu Package, It supports iOS and Android.


  • 🙀 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.

Navigation

Function introduction

A custom is strong dropdown menu for Flutter. Easy to use and powerful for customization, it's up to you what you want to display in the dropdown menu!

  • Custom dropdown header
  • Custom dropdown header item
  • Custom dropdown menu
  • Custom dropdown menu animation
  • Control dropdown menu show or hide

View version update records

To do list

  • Because GZXDropDownMenu can only be used in Stack, its scalability is not strong enough
  • Supports CustomScrollView and NestedScrollView
  • ..........

Gif effect picture

The renderings show the pull-down filtering menus of Meituan and Taobao.

  • Meituan's code is in the example directory of this warehouse
  • The code of Taobao is in Flutter Taobao

How to use

It has been released to Pub, and you can view the latest version and update instructions on Pub's official website! Go to Pub official website to check

1. Add gzx_dropdown_menu package

Open the pubspec.yaml file Add the following code

 gzx_dropdown_menu :  ^ three point one . zero

After adding, open Terminal and execute flutter packages get

2. Using

  • 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.

There is no time to edit text, and it is better to run it directly to see the effect, and then look at the code to know how to use it.

forget it 🤪🤪🤪🙄 Let's simply say it!!!
You just need to nest GZXDropDownHeader and GZXDropDownMenu into your code

GZXDropDownHeader

It should be noted here that these parameters are not required to be written. I just write them to let you know the powerful user-defined functions. In fact, the first three parameters are required

 //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, ),

GZXDropDownMenu

 //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 (() {}); })), ], ),

Related Repository

Related articles

Donate developers