Flutter TextField　デザイン　サンプル集

# 前書き

「あれ、TextFieldであの表現...どうするんだっけ...」

となった時にでもこの記事を参照していただけますと幸いです。

参考サイト
https://medium.com/flutter-community/a-visual-guide-to-input-decorations-for-flutter-textfield-706cf1877e25


#サンプルコード

## 装飾なし

![スクリーンショット 2021-05-29 16.34.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/667355/54587b19-a9d4-5a4e-352a-75409b2f4d5f.png)

```dart
TextField(),
```

## icon
![スクリーンショット 2021-05-29 16.39.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/667355/1990a26e-7cea-d705-46f2-d5fa394042a0.png)

```dart
TextField(
  decoration: InputDecoration(
     icon: Icon(Icons.ac_unit),
   ),
),
```

## prefixIcon
![スクリーンショット 2021-05-29 16.44.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/667355/c38946ca-97f2-b15c-4e61-6d88bdb594e1.png)

```dart
TextField(
  decoration: InputDecoration(
     prefixIcon: Icon(Icons.ac_unit),
   ),
),
```

## suffixIcon

![スクリーンショット 2021-05-29 16.46.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/667355/fcd27225-2e48-e924-fb0f-be5f4eb05d3a.png)

```dart
TextField(
  decoration: InputDecoration(
     suffixIcon: Icon(Icons.ac_unit),
   ),
),
```

## Icon Style (Color)

![スクリーンショット 2021-05-29 16.52.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/667355/c5b91469-88f3-e96b-491f-aab8afe54173.png)

```dart
TextField(
  decoration: InputDecoration(
     prefixIcon: Icon(Icons.ac_unit, color: Colors.amber,),
   ),
),
```

## Icon Style ( Size )

![スクリーンショット 2021-05-29 16.55.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/667355/c28e682f-60c9-0a30-cc54-309ab4d16fcb.png)


```dart
TextField(
  decoration: InputDecoration(
     suffixIcon: Icon(Icons.ac_unit, color: Colors.amber, size: 40,),
   ),
),
```

## prefixText

![スクリーンショット 2021-05-29 16.59.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/667355/a7e732fe-4042-edae-ad31-27ee7d3c5320.png)

```dart
TextField(
  decoration: InputDecoration(
     prefixText: '東京都渋谷区'
   ),
),
```

## suffixText

![スクリーンショット 2021-05-29 17.03.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/667355/6922ecaa-4362-99c7-fb48-04c1a97827a8.png)

```dart
TextField(
  decoration: InputDecoration(
     suffixText: '@gmail.com'
   ),
),
```

## hintText

![スクリーンショット 2021-05-29 17.03.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/667355/2bc66b69-7727-0ea9-fbb1-ade6e22318a1.png)

```dart
TextField(
  decoration: InputDecoration(
     hintText: 'ユーザーIDを入力してください'
   ),
),
```

## helperText

![スクリーンショット 2021-05-29 17.06.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/667355/ddf29695-2c48-76ad-859a-5b9aad43b5e4.png)


```dart
TextField(
  decoration: InputDecoration(
     helperText: 'ユーザーID'
   ),
),
```

## labelText

![スクリーンショット 2021-05-29 17.07.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/667355/beb49aee-3552-13ef-913f-1117b8fae9f9.png)

```dart
TextField(
  decoration: InputDecoration(
     labelText: 'ユーザーID'
   ),
),
```

## counterText

![スクリーンショット 2021-05-29 17.08.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/667355/25203c02-ea58-d1a4-50c4-719e79739e58.png)

```dart
TextField(
  decoration: InputDecoration(
     counterText: '10/20',
   ),
),
```

## errorText

![スクリーンショット 2021-05-29 17.20.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/667355/e4479ddc-2732-4ea8-ba32-1e53202a6026.png)

```dart
TextField(
  decoration: InputDecoration(
     errorText: '半角英字は含めないでください'
   ),
),
```

## Text Style

テキストスタイルの箇所は必要に応じてコードを変更してください。
スタイル適用可能なテキストは以下です。
・labelStyle
・counterStyle
・errorStyle
・prefixStyle
・suffixStyle
・helperStyle.

以下、2つのサンプルを掲載します。

![スクリーンショット 2021-05-29 17.10.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/667355/7277a51d-5428-4136-0692-4d2ebbc51ecb.png)

```dart
TextField(
  decoration: InputDecoration(
     counterText: '10/20',
     counterStyle: TextStyle(
       fontSize: 20,
       color: Colors.amber,
     )
  ),
),
```

![スクリーンショット 2021-05-29 17.12.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/667355/bcfde77c-e4c9-b76d-e341-2e1ec0612f85.png)

```dart
TextField(
  decoration: InputDecoration(
     helperText: 'ユーザーID',
     helperStyle: TextStyle(
       fontSize: 20,
       color: Colors.amber,
     )
  ),
),
```


## MaxLines

maxlinesも同様に必要に応じてコードを変更してください。
maxlinesが適用可能なのは以下です。
・hintMaxLines
・helperMaxLines
・errorMaxLines

![スクリーンショット 2021-05-29 17.17.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/667355/f5fa50a2-0a6f-9289-214e-662e2a6d7bcb.png)


```dart
TextField(
  decoration: InputDecoration(
     hintMaxLines: 3,
     hintText: 'ユーザーIDを入力してください\nユーザーIDを入力してください\nユーザーIDを入力してください'
   ),
),
```

## hintTextDirection

![スクリーンショット 2021-05-29 17.23.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/667355/c78071a3-60ba-20e5-4264-ee65e22551d6.png)

```dart
TextField(
  decoration: InputDecoration(
     hintText: 'ユーザーID',
     hintTextDirection: TextDirection.rtl,
   ),
),
```

## floatingLabelBehavior

ラベルテキストが常時浮いた状態になっている

![スクリーンショット 2021-05-29 17.24.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/667355/1c36fe40-8d05-3a45-c21e-6dcdb60e5152.png)


```dart
TextField(
  decoration: InputDecoration(
     labelText: 'ユーザーID',
     floatingLabelBehavior: FloatingLabelBehavior.always,
   ),
),
```

フォーカス時にラベルテキストが消える

![スクリーンショット 2021-05-29 17.26.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/667355/fca850c4-672e-9138-ce2b-e0401a646c9f.png)

↓フォーカス時

![スクリーンショット 2021-05-29 17.27.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/667355/a4feca6a-ea17-e040-b1a4-aaf001b2b491.png)


```dart
TextField(
  decoration: InputDecoration(
     labelText: 'ユーザーID',
     floatingLabelBehavior: FloatingLabelBehavior.never
,
   ),
),
```


## border none

![スクリーンショット 2021-05-29 17.29.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/667355/0cf67b4e-37e5-a6ed-5086-26f34e3cbfd0.png)


```dart
TextField(
  decoration: InputDecoration(
     border: InputBorder.none,
   ),
),
```

## underline

![スクリーンショット 2021-05-29 17.29.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/667355/8a507aef-5d34-dfa7-8477-cee76e230fc3.png)

```dart
TextField(
  decoration: InputDecoration(
     border: UnderlineInputBorder(),
   ),
),
```

## border 角丸

borderの色はborderSideで変更可能です。
enabledBorder ＝ 何もしていない時の挙動、見た目
forcusedBorder = フォーカスされた時の挙動、見た目

![スクリーンショット 2021-05-29 17.40.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/667355/6b1c3af9-3dd2-d120-5970-f56eca230dd1.png)

```dart
TextField(
  decoration: InputDecoration(
     enabledBorder: OutlineInputBorder(
       borderRadius: BorderRadius.circular(30),
       borderSide: BorderSide(
       color: Colors.amber,
       )
     ),
     focusedBorder: OutlineInputBorder(
       borderRadius: BorderRadius.circular(30),
       borderSide: BorderSide(
       color: Colors.amber,
       )
     ),
   ),
),
```

## filled

![スクリーンショット 2021-05-29 17.42.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/667355/c817fa27-1f94-c14d-1690-57f3e40f3f82.png)


```dart
TextField(
  decoration: InputDecoration(
     filled: true,
     fillColor: Colors.grey,
   ),
),
```

![スクリーンショット 2021-05-29 17.43.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/667355/8aa12c08-a157-e5a3-7f00-d5c8894644cb.png)

```dart
TextField(
  decoration: InputDecoration(
     filled: true,
     fillColor: Colors.grey.shade200,
     border: OutlineInputBorder(
       borderRadius: BorderRadius.circular(10),
       borderSide: BorderSide.none,
     )
   ),
),
```

## enabled false

入力を受け付けない

![スクリーンショット 2021-05-29 17.45.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/667355/78672a56-e825-7755-f748-d5b0a81eec87.png)


```dart
TextField(
  decoration: InputDecoration(
     enabled: false,
     hintText: 'ユーザーID',
   ),
),
```