【Flutter】TextFormFieldについてのメモ

TextFormFieldに関するメモ

## InputDecoration
### text
```dart
TextFormField(
  decoration: const InputDecoration(
     labelText: 'LabelText',
     hintText: 'HintText',
     helperText: 'HelperText',
     // errorText: 'ErrorText', // エラー状態になり下の写真で青色の部分が赤色に変わる
     // hintMaxLines: 10,       // hintTextの最大表示行数を指定
  ),
),
```
![Screenshot_1639812477.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1630025/e457f875-e301-9bf1-dd2a-c3e42d6ac4c0.png)
![Screenshot_1639812480.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1630025/6ad66d7e-374c-2712-1413-0e7d2a0282aa.png)


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

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

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

```
![Screenshot_1639814365.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1630025/493f8d70-61ec-b474-7ae7-2926c3e495c4.png)

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

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

```dart
decoration: const InputDecoration(
   labelText: 'LabelText',
   border: OutlineInputBorder(),
),
```
![Screenshot_1639813197.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1630025/31f3e425-c21e-feb7-5c17-fbe66c066b41.png)

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

TextFormField(
  decoration: const InputDecoration(
     labelText: 'Underline',
     icon: Icon(Icons.perm_identity),
  ),
),
```
![Screenshot_1639813412.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1630025/5c611ab6-7825-ebd0-196e-b695509c0876.png)

iconは外部に表示される

### prefixIcon・suffixIcon

```dart
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),
  ),
),
```
![Screenshot_1639813697.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1630025/608a7587-f598-0c12-ae5a-28e239cb6672.png)

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

## textInputAction
https://qiita.com/rinka00851830/items/3bf0ad054755181da77f

## keyboardType
https://qiita.com/rinka00851830/items/031a51879134a0b67ccf

## autofocus
デフォルトはfalse

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

## obscureText
デフォルトはfalse

```dart
obscureText: true, // 入力された文字を隠す。パスワードに最適
```
![Screenshot_1639815381.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1630025/05762da8-099d-fc3f-a0d2-6374ca557dba.png)

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

```dart
maxLength: 10, // 文字数制限
```
![Screenshot_1639815584.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1630025/d2501904-91a3-201f-2ba6-e396b298a823.png)

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

```dart
maxLength: 10,
maxLengthEnforcement: MaxLengthEnforcement.none,
```
![Screenshot_1639816038.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1630025/3a1f7db4-5f7f-55a1-91ab-f2956da42f5c.png)