Flutter - DropdownButton overflow

flutter dropdown button style
flutter dropdown button default value
flutter material dropdown button
flutter dropdown from api
dropdownmenuitem flutter
flutter dropdownmenuitem height
disable dropdown button flutter
dropdown button flutter padding

I am experimenting with Flutter, and currently trying to display an input field and a dropdown in a list view in a dialog box. However, I get the drop-down overflowing the horizontal width of view and causing yellow-gray striped pattern (shown below)

Overflow of DropdownButton widget in ListView

The code is:

    class DataInput extends StatefulWidget {

      @override
      State createState() => new DataInputState("");
    }


    enum DismissDialogAction {
      cancel,
      discard,
      save,
    }

    class DataInputState extends State<DataInput> {
      final String _data;
      static const types = const <Map<String, String>>[
        const {
          "id": "103",
          "desc": "0001 - lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum"
        },
        const {
          "id": "804",
          "desc": "0002 - lorem ipsum lorem ipsum"
        },
      ];

      DataInputState(this._data);

      @override
      Widget build(BuildContext context) {
        final ThemeData theme = Theme.of(context);
        return new Scaffold(
          appBar: new AppBar(
            title: const Text("Details"),
            actions: <Widget>[
              new FlatButton(
                  onPressed: () => Navigator.pop(context, DismissDialogAction.save),
                  child: new Row(
                    children: <Widget>[
                      new Icon(Icons.save, color: Colors.white,),
                      new Text(
                          "Save",
                          style: theme.textTheme.body1.copyWith(
                            color: Colors.white,)
                      )
                    ],
                  )
              ),
            ],
          ),
          body: new ListView(
            shrinkWrap: true,
            children: <Widget>[
              new Text("Set Label"),
              new TextField(
                autocorrect: false,
              ),
              new Text("Select Type"),
              new Container(
                width: new FractionColumnWidth(0.5).value,
                child: new DropdownButton(
                    items: types.map((m) =>
                    new DropdownMenuItem(
                        key: new Key(m["id"]),
                        child: new Text(m["desc"]))
                    ).toList(growable: false),
                    onChanged: null
                ),
              ),
            ],
          ),
        );
      }
    }

Error:

    ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
    The following message was thrown during layout:
    A horizontal RenderFlex overflowed by 433 pixels.

    The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
    black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
    RenderFlex to fit within the available space instead of being sized to their natural size.
    This is considered an error condition because it indicates that there is content that cannot be
    seen. If the content is legitimately bigger than the available space, consider clipping it with a
    RectClip widget before putting it in the flex, or using a scrollable container rather than a Flex,
    for example using ListView.
    The specific RenderFlex in question is:
    RenderFlex#cc264 relayoutBoundary=up12 OVERFLOWING
    creator: Row ← SizedBox ← DefaultTextStyle ← Stack ← Listener ← _GestureSemantics ←
    RawGestureDetector ← GestureDetector ← DropdownButton ← ConstrainedBox ← Container ←
    RepaintBoundary-[<3>] ← ⋯
    direction: horizontal
    mainAxisAlignment: space-between
    mainAxisSize: min
    crossAxisAlignment: center
    textDirection: ltr
    verticalDirection: down

I have tried the following approaches, and they don't work:

  • Wrapping the drop down in a Row, Column, Padding and ClipRect

Can someone help me understand this and show how to fix it?

Update Using FittedBox prevents the overflow, but the text size then shrinks to be un-legible.

I think you're running into a legit bug with the DropDownButton itself. There is a Github issue about the problem here: https://github.com/flutter/flutter/issues/9211

If you need an immediate fix, you can actually patch up the DropDownButton yourself! To do so:

  1. Open the dropdown.dart from the Flutter Framework and paste it into your own project as fixed_dropdown.dart.
  2. Delete the DropDownMenuItem class from this file so it does not cause conflicts with your normal Flutter imports
  3. Rename DropDownButton to FixedDropDownButton so it does not conflict with Flutter imports
  4. Navigate to the build method of the _DropdownButtonState. Find the IndexedStack inside a Row. Wrap the IndexedStack with an Expanded widget.

I posted this info on the Github Issue itself, and screenshots of this solution can be found there as well if you want to see the fix in action!

DropdownButton overflow issue when onChanged is null � Issue , overflow: TextOverflow.ellipsis, ), value: 'abc', ), ], ), );. Logs. I/flutter (26419): ═ ═╡ EXCEPTION CAUGHT BY RENDERING LIBRARY� A material design button for selecting from a list of items. A dropdown button lets the user select from a number of items. The button shows the currently selected item as well as an arrow that opens a menu for selecting another item.

The easiest solution is to add the isExpanded property to true in DropdownButton

For example:

new DropdownButton(
                  isExpanded: true, //Adding this property, does the magic
                  items: [
                    new DropdownMenuItem(
                        child: Text("Some large text that needs to be wrapped or ellipsized", 
                        overflow: TextOverflow.ellipsis),
                    ),
                    new DropdownMenuItem(
                      child: Text("This is another large text that needs to be wrapped or ellipsized", 
                      overflow: TextOverflow.ellipsis),
                    ),
                    new DropdownMenuItem(
                      child: Text("And one more large text that needs to be wrapped or ellipsized", 
                      overflow: TextOverflow.ellipsis),
                    )
                  ],
                  onChanged: (val) {
                    //print(val);
                  }),

Handling multi-line items in DropdownButton and , import 'package:flutter/material.dart'; void main() { runApp(new DropdownButton selected item overflows and hides dropdown icon #42328. When DropdownButton is given a null argument for the onChanged parameter (or when no argument is present), a render error occurs with an infinite horizontal overflow.

I managed to solve the issue by wrapping the child of DropdownMenuItem in a SizedBox and by giving sizedBox a fixed width which will not overflow the UI and still look good.

eg.

                   new DropdownMenuItem<String>(
                      value: value,
                      child:  new SizedBox(
                        width: 200.0,
                        child: new Text('Long text with ${value} ')
                      ),
                    )

DropdownButton class - material library - Dart API, A dropdown button lets the user select from a number of items. The button shows the currently selected item as well as an arrow that opens a menu for selecting� I'm trying to get my DropdownButton working. It's showing in an AlertDialog and working fine, except when I pass long texts. I searched to fix this before but the technique used in issue #9211 (#9211) isn't working here for some reason.

Elaborating on ganapat answer you can set up the list this way:

final dropdownItems = _list
        .map((String item) => new DropdownMenuItem<String>(
              value: item,
              child: new SizedBox(width: 200.0, child: new Text(item)),
            ))
        .toList();

Flutter - DropdownButton overflow in ListView, DropdownButton class - material library - Dart API, A dropdown form field using a dropdown button inside a form field. Flutter Android iOS web. Readme Can be� Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information. DropdownButton in Flutter not changing values to the

None of the above solves this problem properly.

please try FittedBox as documented here

just wrap your DropdownMenuItem's child like this

DropdownMenuItem<MyDropdownContentClass>(
            child: FittedBox(
              child: Text("dropdown item display"),
              fit: BoxFit.contain,
            ),
          );

it will automatically resize the whole widget during paint, which is your Text().

How to add DropdownButton overflow in ListView in Flutter?, How to add DropdownButton overflow in ListView in Flutter, The easiest solution is to add the isExpanded property to true in� Browse other questions tagged drop-down-menu flutter spinner flutter-layout or ask your own question. The Overflow Blog Full data set for the 2020 Developer Survey now available!

Flutter - DropdownButton overflow in ListView, Flutter - DropdownButton overflow in ListView. dropdown button form field flutter flutter dropdown button default value flutter dropdown button style I needed to add DropdownButton with full width with adjust dropdown arrow icon in Flutter as well. But with many tried it in many ways but it doesn't expand its width full.

Flutter - DropdownButton overflow in ListView, Flutter - DropdownButton overflow in ListView However, I get the drop-down overflowing the horizontal width of view and causing yellow-gray� In Flutter, I am trying to change the color of the DropdownButton's icon (the down arrow icon) to white color. I tried using the style property with no help. The text color became white but the icon is still the default grey.

DropdownButton selected item overflows and hides dropdown icon , in issue #9211 (https://github.com/flutter/flutter/issues/9211) isn't working here for some reason. I'm using Text(text, overflow: TextOverflow.ellipsis) in my items. Therefore, even if you use TextOverflow.ellipse on your Text Widget, it will continue to Overflow. I extracted the DropDownButton into a MyDropdownButton that wraps the IndexedStack with an Expanded to test this theory. The Screenshots and code are below: Long Text Without Fix (No Expanded)

Comments
  • Try the isExpanded property for DropDownButton. Source: stackoverflow.com/a/53213558/2551290
  • This solution breaks if you wrap it in a Row widget, because Expanded causes infinite width. I fixed that in my code, by wrapping in a stackwidget and providing some padding on right of textview and placcing the arrow down button on right.this works fine for me : github.com/apgapg/Flutter_Pull_Request/blob/master/…
  • If you don't want the selected item to be ellipsized, you can also pair this answer with the selectedItemBuilder field in DropdownButton. Or, you can specify itemHeight to be null, so that it can be larger than kMinInteractiveDimension.
  • This works great. You can also use a ConstrainedBox instead of a SizedBox if you want to be able to set min and max widths instead of having a fixed width.
  • @Daryl Yes, you can you ConstrainedBox or container (and define constraint)
  • The sized box will cause your text to wrap to the next line if it exceeds the width dimension. Where as isexpanded will adjust the width of the dropdownitem to the text length.
  • In my case, for a big list of strings, this just shrinks some text widgets.