flutterpopupmenupopupmenubutton

i want to create pop up menu like this in flutter


i want to create pop up menu on that shows under the button and also have gradient color and the middle item have broder and font is bold i and can be scroll around it,

i hope it make sense . i want exactly like shown in picturei want it be like this

i tried creating with PopupMenuButton but i think it not possible to have gradient background and the border and bold font

currently my view looks like this


Solution

  • I had previously designed a custom dropdown menu for my own projects. You can find the code for it at the following gist URL: https://gist.github.com/kspo/0fd8f36449f0931750b61ff5f86dcc23 . You can copy this code and modify the necessary parts to fit your needs. Additionally, I'm providing an example of how to use this code in your project after importing it:

    CustomDropdown<int>(
      hideIcon: true,
      onChange: (int value, int index) => print(value),
      dropdownButtonStyle: const DropdownButtonStyle(
        width: 170,
        height: 40,
        elevation: 1,
        backgroundColor: Colors.white,
        primaryColor: Colors.black87,
      ),
      dropdownStyle: DropdownStyle(
        borderRadius: BorderRadius.circular(20),
        elevation: 6,
        color: Colors.grey.withOpacity(0.1),
        padding: const EdgeInsets.all(5),
      ),
      items: [
         'item 1',
         'item 2',
         'item 3',
         'item 4',
         'item 5',
         'item 6',
         'item 7',
         'item 8',
         'item 9',
      ]
       .asMap()
       .entries
       .map((item) => DropdownItem<int>(
         value: item.key + 1,
         child: Padding(
         padding: const EdgeInsets.all(8.0),
         child: Text(
           item.value,
           textAlign: TextAlign.center,
           style: TextStyle(fontWeight: FontWeight.w700),
         ),
      ),
     ),
    ).toList(),
      child: const Row(
        children: [
         Icon(Icons.filter_list),
         Text('dropdown'),
        ],
      ),
    )
    

    I see that your example picture has a frosted glass background. With this custom_dropdown, you can also make your items' background frosted. Just give your background color some opacity like Colors.white.withOpacity(0.5). If you don't want frosted BG, simply do not use opacity.