Question 206826 in Flutter Question posted in
The official Flutter documentation can be found here.

The height of DropdownSearch is unnecessarily large in flutter

I am using DropDownSearch in flutter, and I am giving it a list for menuItems. Currently, it has only a single item in it, but the menu is really long and showing a lot of blank space in it. How can I reduce it??

My code:

Expanded(
   child: DropdownSearch<Branch>(
     items: userP.branch ?? [],
     onChanged: (item) {
        setState(() {
          _selectedBranch = item;
          Provider.of<MainProvider>(context, listen: false) 
             .setSelectedBranchId(item!.id!);
          });
     },
     selectedItem: _selectedBranch,
     dropdownDecoratorProps: const DropDownDecoratorProps(
       baseStyle: TextStyle(
         overflow: TextOverflow.ellipsis,
       ),
       dropdownSearchDecoration: InputDecoration(
         labelText: 'Branch',
         labelStyle: TextStyle(
           fontSize: 16,
           fontWeight: FontWeight.w400,
           color: AppColors.textPrimary,
         ),
         floatingLabelAlignment: FloatingLabelAlignment.start,
         contentPadding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
         border: OutlineInputBorder(),
      ),
     ),
     itemAsString: (Branch data) {
       return data.branchName ?? "";
     },
     popupProps: PopupPropsMultiSelection.menu(
       showSearchBox: false,
       fit: FlexFit.tight,
       itemBuilder: (context, branch, val) {
         return Padding(
           padding: const EdgeInsets.symmetric(horizontal: 8),
           child: DropdownMenuItem(
              child: Text(branch.branchName ?? ""),
           ),
         );
       },
     ),
   ),
 ),

Here is a picture:

This image

Tags:

2

Answers


  1. 0

    try this:

    popupProps: PopupPropsMultiSelection.menu(
   showSearchBox: false,
   fit: FlexFit.loose, // << change this
.....
    Login or Signup to reply.
  2. 0

    There is a property under popupProps which has an attribute called constraints through which you can set the height and width of the dropdown menu.

    This is the implementation:

    popupProps: PopupPropsMultiSelection.menu(
              constraints: BoxConstraints.tight(Size(
                  MediaQuery.sizeOf(context).width * 0.95,
                  MediaQuery.sizeOf(context).height * 0.15)),
              showSearchBox: false,
              fit: FlexFit.tight,
              itemBuilder: (context, branch, val) {
                return Padding(
                  padding: const 
                   EdgeInsets.symmetric(horizontal:8),
                  child: DropdownMenuItem(
                    child: Text(branch),
                  ),
                );
              },
            ),

    Hope this helps you.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search