複数行の自動伸長テキスト Auto-growing Text Field
1行で始まり、改行や折り返しで行が増えると欄が伸びる。決めた行数を超えると、それ以上は伸びずに中でスクロールする。
本物の 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