【Flutter】動的に入力欄を追加する際の縦幅の制御

概要

[Flutter]動的にTextFieldを追加, 削除できるUIの記事で、入力欄を動的に追加や削除できる実装が紹介されています。
FlutterではListView内で要素を動的に変えられるような実装をする場合、縦幅の考慮が必要になります。これを考慮しないとWidget overflowed by pixelsの記事で紹介されているような、overflowエラーが発生します。今回はこの縦幅の考慮について、どう対応するべきかというのをメモ書きします。

前提

• 使用したFlutterのバージョンは3.3.10です。

対応方針

• 描画の範囲を制限するために、ConstrainedBoxを使用します。ConstrainedBoxの概要については要素の大きさを制限するの記事を参照ください。
• こちらのstackoverflowの記事にある通り、ListViewでスクロールできるようにscrollDirection: Axis.vertical、shrinkWrap: trueの設定を追加します。
• 画面イメージは以下のような感じになります。
  

実装サンプル

ListViewの設定部分の実装のみ、以下に記します。他の実装については、上記で記載した[Flutter]動的にTextFieldを追加, 削除できるUIの記事を参照ください。

ConstrainedBox(
  constraints: const BoxConstraints(maxHeight: 450, minHeight: 100),
  child: ListView(
    scrollDirection: Axis.vertical,
    shrinkWrap: true,
      children: [
        ...textEditingList.value.map((item) => textFieldItem(item)),
        const SizedBox(height: 10),
        ElevatedButton(
          style: ElevatedButton.styleFrom(
            backgroundColor: const Color.fromARGB(255, 38, 196, 177),
          ),
          onPressed: () {
            add();
          },
          child: const Text("原因を追加"),
        )
      ],
 ),
);