DropdownButtonFormField, with fixed width but dynamic text items

Question

I don't think I understand constraints in Flutter that well so bear with me!

I want to DropdownButtonFormField that populates its items from DB. The string could be of any dynamic length. So what I have decided is to have a fixed width DropdownButtonFormField and DropdownMenuItem will have ellipsed Text.

Here is what I have tried.

SizedBox(
  width: 136.0,
  child: DropdownButtonFormField<int>(
    hint: Text("hintText")
    decoration: InputDecoration(
        contentPadding: const EdgeInsets.all(0.0),
        enabledBorder: UnderlineInputBorder(
          borderSide: BorderSide(color: Colors.white),
        ),
        isDense: true),
    items: [
        DropdownMenuItem<int>(
            value: 0,
            child: TextOneLine(
              "less character",
            ),
        ),
        DropdownMenuItem<int>(
            value: 0,
            child: TextOneLine(
              "mooooorrrrreeee character",
            ),
        )
    ]
  ),
);

class TextOneLine extends StatelessWidget {
  final String data;
  final TextStyle style;
  final TextAlign textAlign;
  final bool autoSize;

  TextOneLine(
    String data, {
    Key key,
    this.style,
    this.textAlign,
    this.autoSize = false,
  })  : this.data = data,
        assert(data != null),
        super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text(
        data,
        style: style,
        textAlign: textAlign,
        maxLines: 1,
        overflow: TextOverflow.ellipsis,
      );
  }
}

• I am getting overflow error

• but when I click on DropdownButtonFormField the list of DropdownMenuItem are ellipsed.

How do I get rid of the Overflow error? I can't have Flexible or Expanded DropDownButtonFormField because the String length could be dynamic (could be longer than what could fit).

Answer 1

I know it might be a bit late to share the answer but I found an easy fix. Just add a isExpanded: true to the DropdownButtonFormField.

  DropdownButtonFormField<int>(
        hint: Text("hintText"),
        isExpanded: true,
        decoration: InputDecoration(
            contentPadding: const EdgeInsets.all(0.0),
            enabledBorder: UnderlineInputBorder(
              borderSide: BorderSide(color: Colors.white),
            ),
            isDense: true),
        items: [
          DropdownMenuItem<int>(
            value: 0,
            child: Container(
              width: 100,
              child: TextOneLine(
                "less character",
              ),
            ),
          ),
          DropdownMenuItem<int>(
              value: 0,
              child: Container(
                width: 100,
                child: TextOneLine(
                  "mooooorrrrreeee character",
                ),
              ))
        ])

Before Adding isExpanded property After Adding isExpanded property

Answer 2

Please refer the attached images, I've added 3 images.

Image 1: this is the issue you are getting.

Image 2: when I removed the width from SizedBox. Now it shows 3 boxes 1 is hint text and other is empty and 3rd is the drop-down arrow. I think the overflow is causing because of the 2nd empty space.

Image 3: Now in this, I've again added a width to SizedBox of 136 and put the SizedBox inside a Container having a fixed width size of 100 (is the width of the text in dropdown and it will wrap your text as per the width for sure). This resolved the overflow issue as per the code you have given.

I think as you have added a custom widget which is TextOneLine causing the issue. There may be some other workarounds but this solved the issue.

SizedBox(
        width: 136,
        child: DropdownButtonFormField<int>(
            hint: Text("hintText"),
            decoration: InputDecoration(
                contentPadding: const EdgeInsets.all(0.0),
                enabledBorder: UnderlineInputBorder(
                  borderSide: BorderSide(color: Colors.white),
                ),
                isDense: true),
            items: [
              DropdownMenuItem<int>(
                value: 0,
                child: Container(
                  width: 100,
                  child: TextOneLine(
                    "less character",
                  ),
                ),
              ),
              DropdownMenuItem<int>(
                  value: 0,
                  child: Container(
                    width: 100,
                    child: TextOneLine(
                      "mooooorrrrreeee character",
                    ),
                  ))
            ]),
      )

Try out this and let me know whether this was the issue (and resolved) and please keep us updated any other workaround you done. Thanks