CODEWITHSUNDEEP
flutterdart
VigneshK
VigneshK

Reputation: 803

How to set dynamic height for dropdown popup in flutter

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(),
        ),
    ),
);

enter image description here

Upvotes: 5

Views: 10098

Answers (3)

Xc0d3r
Xc0d3r

Reputation: 591

Simply setting the itemHeight property of DropdownButton to null makes the items have dynamic height.

    DropdownButton(
      ... 
      itemHeight: null, 
      ...
    )

Documentation link: https://api.flutter.dev/flutter/material/DropdownButton/itemHeight.html

Upvotes: 3

Ovidiu
Ovidiu

Reputation: 8714

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.

Upvotes: 8

szotp
szotp

Reputation: 2622

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.

Upvotes: 2

Related Questions