Flutter - ListViewのDropdownButtonオーバーフロー

Question

Flutterを試していて、現在、ダイアログボックスのリストビューに入力フィールドとドロップダウンを表示しようとしています。

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 
       ), 
      ), 
      ], 
     ), 
     ); 
     } 
    } 

エラー：

しかし、私は、ドロップダウンビューの横幅をオーバーフローし、（以下に示す）を黄色灰色縞模様

Overflow of DropdownButton widget in ListView

コードであるの原因を得ます

══╡ 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 

私は以下のアプローチを試みましたが、機能しません。

• 行、列、パディングとのclipRectで、ドロップダウンラッピング

は、誰かが私がこのことを理解し、それを修正する方法を示して助けることができますか？ FittedBoxを使用

更新 は、オーバーフローを防止するが、テキストのサイズは、次いで、非判読可能であることが縮みます。

Answer 1

DropDownButton自体が正当なバグに遭遇していると思います。この問題に関するGithubの問題があります：https://github.com/flutter/flutter/issues/9211

すぐに修正する必要がある場合は、実際にDropDownButtonを自分で修正することができます。そうするために：

1. がフラッターフレームワークからdropdown.dartを開き、fixed_dropdown.dartとして、独自のプロジェクトに貼り付けます。
2. それはそれは_DropdownButtonStateのbuild方法にフラッタ輸入
3. 移動と競合しないFixedDropDownButtonに通常のフラッターの輸入と競合
4. 名前の変更DropDownButtonを起こさないように、このファイルからDropDownMenuItemクラスを削除します。 の中にIndexedStackがあります。 IndexedStackをExpandedウィジェットで囲みます。

私はこの情報をGithub Issue自体に掲載しました。この解決策のスクリーンショットは、実際の修正を見たい場合にも表示されます。