title: Flutter - DropdownButton overflow
body: <p>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)</p>
  
  <p><a href="https://i.stack.imgur.com/72QRf.png" rel="noreferrer"><img src="https://i.stack.imgur.com/72QRf.png" alt="enter image description here"></a>
  Overflow of DropdownButton widget in ListView</p>
  
  <p>The code is:
  </p>
  
  <pre><code>    class DataInput extends StatefulWidget {
  
        @override
        State createState() =&gt; new DataInputState("");
      }
  
  
      enum DismissDialogAction {
        cancel,
        discard,
        save,
      }
  
      class DataInputState extends State&lt;DataInput&gt; {
        final String _data;
        static const types = const &lt;Map&lt;String, String&gt;&gt;[
          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: &lt;Widget&gt;[
                new FlatButton(
                    onPressed: () =&gt; Navigator.pop(context, DismissDialogAction.save),
                    child: new Row(
                      children: &lt;Widget&gt;[
                        new Icon(Icons.save, color: Colors.white,),
                        new Text(
                            "Save",
                            style: theme.textTheme.body1.copyWith(
                              color: Colors.white,)
                        )
                      ],
                    )
                ),
              ],
            ),
            body: new ListView(
              shrinkWrap: true,
              children: &lt;Widget&gt;[
                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) =&gt;
                      new DropdownMenuItem(
                          key: new Key(m["id"]),
                          child: new Text(m["desc"]))
                      ).toList(growable: false),
                      onChanged: null
                  ),
                ),
              ],
            ),
          );
        }
      }
  </code></pre>
  
  <p>Error:</p>
  
  <pre><code>    ══╡ 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-[&lt;3&gt;] ← ⋯
      direction: horizontal
      mainAxisAlignment: space-between
      mainAxisSize: min
      crossAxisAlignment: center
      textDirection: ltr
      verticalDirection: down
  </code></pre>
  
  <p>I have tried the following approaches, and they don't work:</p>
  
  <ul>
  <li>Wrapping the drop down in a Row, Column, Padding and ClipRect</li>
  </ul>
  
  <p>Can someone help me understand this and show how to fix it?</p>
  
  <p><strong>Update</strong>
  Using <code>FittedBox</code> prevents the overflow, but the text size then shrinks to be un-legible.</p>