個人開発者が勉強がてらまとめているだけのサイトです

複数行の自動伸長テキスト Auto-growing Text Field

1行で始まり、改行や折り返しで行が増えると欄が伸びる。決めた行数を超えると、それ以上は伸びずに中でスクロールする。

別名
自動で伸びる入力欄複数行入力チャットの入力欄改行できる入力欄テキストエリアMultiline TextFieldExpanding TextField
動き
改行すると欄が下へ伸びる上限を超えると中でスクロール
作り方
標準ウィジェット Flutter に入っているものだけで作れます

本物の Flutter ウィジェットが動きます(初回は数秒かかります)

別タブで大きく開く ↗

どんなもの?

TextField に minLines: 1 と maxLines: 5 を渡すと、1行から5行まで中身に合わせて高さが変わります。

maxLines: null にすると上限なく伸びます(画面からはみ出すので、チャットでは上限を付けるのが普通です)。

keyboardType: TextInputType.multiline にすると、キーボードの Enter が改行になります。

チャットの入力欄では、送信ボタンを下揃え(CrossAxisAlignment.end)にしておくと、欄が伸びてもボタンが下に残ります。

こんなときに

  • チャット・コメント・メモなど、長さの決まっていない文章

避けたい場面

  • 1行で済む入力(名前・メールは1行のまま)

最小コード

Row(crossAxisAlignment: CrossAxisAlignment.end, children: [
  const Expanded(
    child: TextField(
      minLines: 1,
      maxLines: 5,      // 5行までは伸び、超えたら中でスクロール
      keyboardType: TextInputType.multiline,
      decoration: InputDecoration(
        hintText: 'メッセージ',
        border: OutlineInputBorder(),
      ),
    ),
  ),
  IconButton.filled(onPressed: send, icon: const Icon(Icons.send)),
])

使うウィジェット

TextField(minLinesmaxLines)TextInputType.multiline

似ているもの・一緒に見たいもの

触ってみる ↗
入力・フォーム 文字数カウンターCharacter Counter

入力欄の右下に「12 / 140」のように打った文字数が出る。上限に近づくと色が変わり、それ以上は打てない。

打つと数字が増える
触ってみる ↗
入力・フォーム テキスト入力の種類Text Field Styles

文字を打つ欄の見た目は「枠線」「塗り」「下線」の3種類。押すと中のラベルが上へ縮んで、枠の色が変わる。

押すとラベルが上へ縮む