【Flutter】TextFormFieldについてのメモ

TextFormFieldに関するメモ

InputDecoration

text

TextFormField(
  decoration: const InputDecoration(
     labelText: 'LabelText',
     hintText: 'HintText',
     helperText: 'HelperText',
     // errorText: 'ErrorText', // エラー状態になり下の写真で青色の部分が赤色に変わる
     // hintMaxLines: 10,       // hintTextの最大表示行数を指定
  ),
),

• labelText
  • どんなに長くても1行しか表示できない
• hintText・helperText・errorText
  • ○○MaxLines を指定することで指定した行数が表示される
  • ※それぞれhintMaxLines・helperMaxLines・errorMaxLinesで指定する

prefixText・suffixText

TextFormField(
  decoration: const InputDecoration(
     labelText: 'LabelText',
     hintText: 'ここに記入できる',
     prefixText: 'PrefixText',
     suffixText: 'SuffixText',

     // 分かりやすいように赤文字に変更した
     prefixStyle: TextStyle(color: Colors.red),
     suffixStyle: TextStyle(color: Colors.red),
  ),
),

prefixTextは左側に、suffixTextは右側に表示される。
上記の場合、記入できるのはprefixTextとsuffixTextの間のみ

border

何も指定しない場合はアンダーライン

decoration: const InputDecoration(
   labelText: 'LabelText',
   border: OutlineInputBorder(),
),

icon

TextFormField(
  decoration: const InputDecoration(
     labelText: 'Outline',
     border: OutlineInputBorder(),
     icon: Icon(Icons.perm_identity),
  ),
),

TextFormField(
  decoration: const InputDecoration(
     labelText: 'Underline',
     icon: Icon(Icons.perm_identity),
  ),
),

iconは外部に表示される

prefixIcon・suffixIcon

TextFormField(
  decoration: const InputDecoration(
     labelText: 'Outline',
     border: OutlineInputBorder(),
     prefixIcon: Icon(Icons.perm_identity),
     suffixIcon: Icon(Icons.search),
  ),
),

TextFormField(
  decoration: const InputDecoration(
     labelText: 'Underline',
     prefixIcon: Icon(Icons.perm_identity),
     suffixIcon: Icon(Icons.search),
  ),
),

prefixIconは左側にsuffixIconは右側に表示される。

textInputAction

keyboardType

autofocus

デフォルトはfalse

autofocus: true, // その画面に来たら自動的にフォーカスされる

obscureText

デフォルトはfalse

obscureText: true, // 入力された文字を隠す。パスワードに最適

maxLength

maxLengthだけを指定すると、指定された文字数を超えて入力することは出来ない。

maxLength: 10, // 文字数制限

maxLengthEnforcement

maxLengthEnforcementを一緒に指定すると、文字数を超えても入力は出来る。（ただし、エラー表示される）

maxLength: 10,
maxLengthEnforcement: MaxLengthEnforcement.none,