FlutterでBottom overflowedが出た場合の対処法

長いテキストをTextやTextFormFieldに表示しようとすると"A RenderFlex overflowed by xx pixels on the bottom."というエラーメッセージと共に以下のような画面表示になることがあります。

解決法(Text)

Textの場合は以下のようにExpandedを使います。

Expanded(child: Text(message))

解決法(TextFormField)

TextFormFieldはmaxLines:を指定するとフォーム内でHTMLのtextarea的に使える複数行入力できるフィールドが作れるのですが、これだと大量のテキストを入力した場合にやはりOverflowの問題が出てしまいます。これを回避するために以下のようにFlexibleとContainerで囲みます。

Flexible(
  child: Container(
    constraints:
        BoxConstraints(minHeight: 200, minWidth: double.infinity),
    child: TextFormField(
      maxLines: 10, // フィールドの高さ
      keyboardType: TextInputType.multiline,
      decoration: InputDecoration(labelText: 'メッセージ'),
    ),
  ),
),

以下のようにOverflowしなくなりました。

解決法(TextFormField その2)

いくつもオブジェクトがあるFormの中にmultilineのTextFormFieldを入れた場合にOverflowを起こすことがあるのを発見しました。この場合は以下のような感じでListViewでFormを包むようにするとうまくいきました。(参考：[Flutter]スクロール可能なFormFieldの取り扱い)

body: ListView(children: <Widget>[
          Form(
            key: _formKey,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
              // 色々オブジェクト...
              TextFormField(
                  keyboardType: TextInputType.multiline,
                  maxLines: 10,
                  decoration: InputDecoration(
                    labelText: "メッセージ",
                  ),
                ),