コピペで使えるTextFormField


入力フォームの作り方を毎度忘れてしまうので、思いつく限りのデザイン集を作って、コピペで楽しようよという記事です。師走なので。

# デフォルト
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/732752/16da017f-6ae4-0622-22c8-953819e0b2ac.png">

```dart
TextFormField(
  decoration: const InputDecoration(hintText: 'デフォルト'),
)
```

# 背景色あり、フレームあり

<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/732752/10b42ec4-5892-4352-f23d-9c6fe44d0856.png">

```dart
TextFormField(
  decoration: InputDecoration(
    hintText: '背景色あり, フレームあり',
    hintStyle: const TextStyle(fontSize: 12, color: Colors.green),
    fillColor: Colors.green[100],
    filled: true,
    focusedBorder: OutlineInputBorder(
      borderRadius: BorderRadius.circular(16),
      borderSide: const BorderSide(
        color: Colors.green,
        width: 2.0,
      ),
    ),
    enabledBorder: OutlineInputBorder(
      borderRadius: BorderRadius.circular(16),
      borderSide: BorderSide(
        color: Colors.green[100]!,
        width: 1.0,
      ),
    ),
  ),
),
```
# フレームあり、ラベルあり


<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/732752/a676b42c-0e60-8730-cc29-4e8fb15708c6.png">

```dart
TextFormField(
  decoration: InputDecoration(
    focusedBorder: OutlineInputBorder(
      borderRadius: BorderRadius.circular(16),
      borderSide: const BorderSide(
        color: Colors.green,
        width: 2.0,
      ),
    ),
    labelStyle: TextStyle(
      fontSize: 12,
      color: Colors.green[300],
    ),
    labelText: 'フレームあり、ラベルあり',
    floatingLabelStyle: const TextStyle(fontSize: 12),
    enabledBorder: OutlineInputBorder(
      borderRadius: BorderRadius.circular(16),
      borderSide: BorderSide(
        color: Colors.green[100]!,
        width: 1.0,
      ),
    ),
  ),
),
```

# アイコンあり、フレームあり
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/732752/1da87e60-2866-cb57-76cd-cb5f427b3753.png">


```dart
TextFormField(
  decoration: const InputDecoration(
    hintText: 'アイコンあり、フレームあり',
    prefixIcon: Icon(
      Icons.search,
    ),
    border: OutlineInputBorder(),
  ),
),
```

# アイコンあり、フレームなし
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/732752/d6dff8c0-d7e7-b50c-8199-bcd6e2a9d908.png">

```dart
TextFormField(
  decoration: InputDecoration(
    hintText: 'アイコンあり、フレームなし',
    fillColor: Colors.green[100],
    filled: true,
    isDense: true,
    prefixIcon: const Icon(Icons.search),
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(32),
      borderSide: BorderSide.none,
    ),
  ),
),
```

# フレームなし、パディングなし
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/732752/644882eb-63fd-d656-0a0d-1e0d3928cf09.png">




```dart
TextFormField(
  decoration: InputDecoration.collapsed(
    hintText: 'フレームなし、パディングなし',
    fillColor: Colors.green[100],
    filled: true,
  ),
),
```

# 複数行入力、フレームなし、パディングなし
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/732752/74c9cd5b-de83-463a-e3eb-326613ffd7b6.png">

```dart
TextFormField(
  maxLines: 6,
  minLines: 6,
  keyboardType: TextInputType.multiline,
  decoration: InputDecoration.collapsed(
    hintText: '複数行入力\n1\n2\n3\n4\n5',
    fillColor: Colors.green[100],
    filled: true,
  ),
),
```

# 複数行入力、角フレームあり、ラベルあり
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/732752/8e3b548b-2b98-c8ab-c719-54d5ee4f7050.png">


```dart
TextFormField(
  maxLines: 6,
  minLines: 6,
  keyboardType: TextInputType.multiline,
  decoration: InputDecoration(
    labelText: '複数行、角フレームあり、ラベルあり',
    enabledBorder: OutlineInputBorder(
      borderRadius: BorderRadius.circular(0),
      borderSide: const BorderSide(
        width: 2,
        color: Colors.green,
      ),
    ),
    focusedBorder: OutlineInputBorder(
      borderRadius: BorderRadius.circular(0),
      borderSide: const BorderSide(
        width: 2,
        color: Colors.green,
      ),
    ),
  ),
),
```

# パラメータ解説

coming soon...