gzx_dropdown_menu

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

Click me to view the version update record

Open source is not easy 🙀🙀🙀, please give a Star⭐ please! I will continue to update the code according to your attention and personal time!

If you want to receive updates, you can Watch and refer to Issues if you have any questions.

Related to the Repository

• Flutter taobao App

Related articles

• The Denver nuggets

navigation

• Gif rendering
• How to use

Gif rendering

The code of Meituan is in the example directory of this warehouse. The code of Taobao is in Flutter taobao, click me to open

How to use

It has been published to Pub and you can check out the latest version and update instructions on Pub website! Click on me to check out the Pub website

1. Add gzx_dropdown_menu package

Open the pubspec.yaml file and add the following code

  gzx_dropdown_menu : ^2.1. 0
Copy the code

Open Terminal and execute flutter Packages GET

2, use,

• It is highly recommended that you clone this warehouse first
• And then run it and see what happens
• Dart file gzx_dropdown_menu_test_page. Dart file gzx_dropdown_menu_test_page. Dart file gzx_dropdown_menu_test_page.

I don’t have time to edit the text, and it’s better to just run it and see what it looks like, and then look at the code and see how it works.

Forget it 🤪🤪🤪🙄 or simply say it!! All you need to do is embed the GZXDropDownHeader and GZXDropDownMenu in your code

GZXDropDownHeader

Note here that these parameters are not required, I wrote them just to let you know that powerful customization is available. In fact, the first three parameters are required

  // Drop down the menu header
  GZXDropDownHeader(
    // Drop down header items, currently each item, can only be customized display text, icon, icon size modification
    items: [
      GZXDropDownHeaderItem(_dropDownHeaderItemStrings[0]),
      GZXDropDownHeaderItem(_dropDownHeaderItemStrings[1]),
      GZXDropDownHeaderItem(_dropDownHeaderItemStrings[2], style: TextStyle(color: Colors.green)),
      GZXDropDownHeaderItem(_dropDownHeaderItemStrings[3], iconData: Icons.filter_frames, iconSize: 18)],// GZXDropDownHeader corresponds to the key of the first parent Stack
    stackKey: _stackKey,
    // controller controls menu display or hide
    controller: _dropdownMenuController,
    // When you click on the event in the header, this is where you can jump to the page or openEndDrawer
    onItemTap: (index) {
      if (index == 3) { _scaffoldKey.currentState.openEndDrawer(); _dropdownMenuController.hide(); }},// Head height
    height: 40.// Head background color
    color: Colors.red,
    // The width of the header border
    borderWidth: 1.// The color of the header border
    borderColor: Color(0xFFeeede6),
    // The height of the dividing line
    dividerHeight: 20.// Split line color
    dividerColor: Color(0xFFeeede6),
    // Text style
    style: TextStyle(color: Color(0xFF666666), fontSize: 13),
    // Drop down the text style
    dropDownStyle: TextStyle(
      fontSize: 13,
      color: Theme.of(context).primaryColor,
    ),
    // Icon size
    iconSize: 20.// Icon color
    iconColor: Color(0xFFafada7),
    // Drop down the icon color
    iconDropDownColor: Theme.of(context).primaryColor,
  ),
Copy the code

GZXDropDownMenu

  // Drop down menu
  GZXDropDownMenu(
    // controller controls menu display or hide
    controller: _dropdownMenuController,
    // Drop down menu to show or hide the animation duration
    animationMilliseconds: 500.// Drop back mask color
    maskColor: Colors.red.withOpacity(0.5),
    dropdownMenuChanging: (isShow, index) {
      setState(() {
        _dropdownMenuChange = '(is${isShow ? 'show' : 'hide'}$index)';
        print(_dropdownMenuChange);
      });
    },
    dropdownMenuChanged: (isShow, index) {
      setState(() {
        _dropdownMenuChange = '(already${isShow ? 'show' : 'hide'}$index)';
        print(_dropdownMenuChange);
      });
    },    
    / / a drop-down menu, highly customized, what do you want to display what you, entirely up to you, you just need to call after choosing _dropdownMenuController. Hide (); Can be
    menus: [
      GZXDropdownMenuBuilder(
          dropDownHeight: 40 * 8.0,
          dropDownWidget: _buildQuanChengWidget((selectValue) {
            _dropDownHeaderItemStrings[0] = selectValue;
            _dropdownMenuController.hide();
            setState(() {});
          })),
      GZXDropdownMenuBuilder(
          dropDownHeight: 40 * 8.0,
          dropDownWidget: _buildConditionListWidget(_brandSortConditions, (value) {
            _selectBrandSortCondition = value;
            _dropDownHeaderItemStrings[1] =
            _selectBrandSortCondition.name == 'all' ? 'brand' : _selectBrandSortCondition.name;
            _dropdownMenuController.hide();
            setState(() {});
          })),
      GZXDropdownMenuBuilder(
          dropDownHeight: 40.0 * _distanceSortConditions.length,
          dropDownWidget: _buildConditionListWidget(_distanceSortConditions, (value) {
            _dropDownHeaderItemStrings[2] = _selectDistanceSortCondition.name; _selectDistanceSortCondition = value; _dropdownMenuController.hide(); setState(() {}); })),,)Copy the code