【Flutter】InputDecoration

TextFieldに見出しがないと複数存在したときにわからないな・・・と思ったらInputDecorationで解決できた！

// テキスト入力
  TextField(
    decoration: InputDecoration(
      labelText: 'Name',
    ),
    // 入力されたテキストの値を受け取る（valueが入力されたテキスト）
    onChanged: (String value) {
      // データが変更したことを知らせる（画面を更新する）
      setState(() {
        // データを変更
        _name = value;
      });
    },
  ),

その他にも色々できるらしかったのでまとめ。

InputDecoration とは

InputDecorationは、FlutterのTextFieldウィジェットなどの入力フィールドに関連する外観や動作を定義するためのクラス。

labelTextとlabelStyle

labelTextは入力フィールドの上に表示されるラベルを指定し、labelStyleはそのスタイルを設定する。

InputDecoration(
  labelText: 'Username',
  labelStyle: TextStyle(color: Colors.blue),
)

hintTextとhintStyle

入力フィールド内に表示されるプレースホルダーテキストとそのスタイル。

InputDecoration(
  hintText: 'Enter your username',
  hintStyle: TextStyle(color: Colors.grey),
)

icon

iconは入力フィールドの先頭に表示されるアイコン。
suffixIconは末尾に表示されるアイコン。

InputDecoration(
  icon: Icon(Icons.person),
  suffixIcon: Icon(Icons.visibility),
)

border, focusedBorder, enabledBorder

borderは非フォーカス時の境界線。
focusedBorderはフォーカス時の境界線。
enabledBorderは有効な状態での境界線。

InputDecoration(
  border: OutlineInputBorder(),
  focusedBorder: OutlineInputBorder(borderSide: BorderSide(color: Colors.blue)),
  enabledBorder: OutlineInputBorder(borderSide: BorderSide(color: Colors.grey)),
)

errorTextとerrorStyle

エラーメッセージとそのスタイル。

InputDecoration(
  errorText: 'Invalid username',
  errorStyle: TextStyle(color: Colors.red),
)