テキスト入力の種類 Text Field Styles

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

別名: テキストフィールド入力欄入力ボックス枠線の入力欄塗りの入力欄下線の入力欄フローティングラベルTextFieldOutlined Text FieldFilled Text Field
動き: 押すとラベルが上へ縮む枠の色が変わる
作り方: 標準ウィジェット Flutter に入っているものだけで作れます

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

別タブで大きく開く ↗

どんなもの？

TextField の見た目は decoration に渡す InputDecoration で決まります。

border: OutlineInputBorder() で枠線、filled: true で塗り、何も付けなければ下線（UnderlineInputBorder）です。

labelText は空のときは欄の中に、入力を始めると枠の上へ縮んで移ります（フローティングラベル）。

hintText（入力例）・prefixIcon（頭のアイコン）・suffixText（単位）・helperText（下の説明）も足せます。

iOS 風にしたいときは CupertinoTextField で、角の丸い灰色の箱に placeholder が入る形になります。

アプリの中では1種類に揃えると、どこが入力欄か迷わせません。

こんなときに

名前・メール・検索語など、自由な文字を入力してもらう

避けたい場面

選択肢が決まっている入力（ドロップダウン・ラジオボタン・ピッカーにする）
1つの画面で枠線と塗りを混ぜる

最小コード

// 枠線
const TextField(
  decoration: InputDecoration(
    labelText: 'お名前',
    hintText: '山田 太郎',
    border: OutlineInputBorder(),
  ),
)

// 塗り
const TextField(
  decoration: InputDecoration(labelText: 'メール', filled: true),
)

// 下線（何も付けないとこれ）
const TextField(decoration: InputDecoration(labelText: '電話番号'))

// iOS 風
const CupertinoTextField(placeholder: '検索')