How to set dynamic height for dropdown popup in flutter

Question

I am new to flutter development. I am using the dropdown button of my application. When opening the drop-down menu, the text is getting cut in the popup dialog. Below I attached a screenshot with coding. Please guide me in fixing this issue.

DropdownButtonHideUnderline(
    child: new DropdownButton(
        isExpanded: true,
        value: dropDownValue,
        isDense: true,
        //icon: Icon(Icons.keyboard_arrow_down, color: Colors.white,),
        onChanged: (String newValue) {
            setState(() {
                dropDownValue = newValue;    
                state.didChange(newValue);
            });
        },
        items: dropDownList.map((String value) {
            return new DropdownMenuItem(
                value: value,
                child: new SizedBox(
                width: MediaQuery.of(context).size.width / 1.4,
                child: new Text(value,
                    softWrap: true,
                    style: TextStyle(color: Colors.white, fontSize: 18.0),),)
                );
            }).toList(),
        ),
    ),
);

Answer 1

Copying the DropdownMenuItem class as someone else suggested will not be enough as DropdownButton requires items to be of type List<DropdownMenuItem<T>>.

I have created the following widget which should help with your issue:

import 'package:flutter/material.dart';

/// Looks like a DropdownButton but has a few differences:
///
/// 1. Can be opened by a single tap even if the keyboard is showing (this might be a bug of the DropdownButton)
///
/// 2. The width of the overlay can be different than the width of the child
///
/// 3. The current selection is highlighted in the overlay
class CustomDropdown<T> extends PopupMenuButton<T> {
  CustomDropdown({
    Key key,
    @required PopupMenuItemBuilder<T> itemBuilder,
    @required T selectedValue,
    PopupMenuItemSelected<T> onSelected,
    PopupMenuCanceled onCanceled,
    String tooltip,
    double elevation = 8.0,
    EdgeInsetsGeometry padding = const EdgeInsets.all(8.0),
    Icon icon,
    Offset offset = Offset.zero,
    Widget child,
    String placeholder = "Please select",
  }) : super(
    key: key,
    itemBuilder: itemBuilder,
    initialValue: selectedValue,
    onSelected: onSelected,
    onCanceled: onCanceled,
    tooltip: tooltip,
    elevation: elevation,
    padding: padding,
    icon: icon,
    offset: offset,
    child: child == null ? null : Stack(
      children: <Widget>[
        Builder(
          builder: (BuildContext context) => Container(
            height: 48,
            alignment: AlignmentDirectional.centerStart,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                DefaultTextStyle(
                  style: selectedValue!= null ? Theme.of(context).textTheme.subhead
                      : Theme.of(context).textTheme.subhead.copyWith(color:     
Theme.of(context).hintColor),
                  child: Expanded(child: selectedValue== null ? Text(placeholder) : child),
                ),
                IconTheme(
                  data: IconThemeData(
                    color: Theme.of(context).brightness == Brightness.light
                        ? Colors.grey.shade700 : Colors.white70,
                  ),
                  child: const Icon(Icons.arrow_drop_down),
                ),
              ],
            ),
          ),
        ),
        Positioned(
          left: 0.0,
          right: 0.0,
          bottom: 8,
          child: Container(
            height: 1,
            decoration: const BoxDecoration(
              border: Border(bottom: BorderSide(color: Color(0xFFBDBDBD), width: 0.0)),
            ),
          ),
        ),
      ],
    ),
  );
}

It actually extends PopupMenuButton as you can see, but I've made it look the same as the DropdownButton.

itemBuilder needs to return List<PopupMenuEntry<T>>, with each entry usually being a PopupMenuItem to which you can provide any child widget.

selectedValue is the currently selected value, which will be highlighted in the overlay. If it is null, a Text widget with the placeholder string is shown. If it is not null, the child widget is shown.

You should be able to disable the highlight by modifying this class to either call super() with an initialValue of null, or even better add a boolean to the constructor to control this from the outside.

Answer 2

The height of DropdownMenuItem is hardcoded to _kMenuItemHeight:

https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/material/dropdown.dart#L486

The only thing you can do is copy this entire file and adjust to your needs.