Flutterのチュートリアルを学んでみた(15)

# Flutterのテキスト入力をマスターしよう！ ✍️

## テキスト入力の種類 📝

Flutterには主に3つのテキスト入力方法があります：
1. TextField（シンプルな入力欄）
2. TextFormField（バリデーション付き入力欄）
3. TextEditingController（高度な入力制御）

## 1. シンプルな入力欄（TextField） 📝

### 基本的な使い方
```dart
TextField(
  onChanged: (text) {
    print('入力された文字: $text');
  },
)
```

### いろいろなカスタマイズ
```dart
TextField(
  enabled: true,           // 入力可能/不可能の切り替え
  maxLength: 10,          // 最大10文字まで
  style: TextStyle(       // 文字のスタイル
    color: Colors.blue,
    fontSize: 20,
  ),
  decoration: InputDecoration(
    icon: Icon(Icons.person),     // 左側のアイコン
    labelText: 'お名前',          // ラベル
    hintText: '山田太郎',         // プレースホルダー
  ),
)
```

## 2. フォーム入力（TextFormField） 📋

入力チェック（バリデーション）付きの入力欄を作れます！

```dart
Form(
  key: _formKey,  // フォームを識別するためのキー
  child: TextFormField(
    decoration: InputDecoration(
      labelText: 'メールアドレス',
    ),
    validator: (value) {
      if (value.isEmpty) {
        return '必須入力です！';
      }
      if (!value.contains('@')) {
        return '@マークを入れてください！';
      }
      return null;  // エラーなし
    },
  ),
)
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3929117/eae49add-4d03-bb98-dba0-22513d502f7a.png)
v

## 3. 高度な制御（TextEditingController） 🎮

テキストの制御をもっと細かくしたいときに使います：

```dart
class _MyFormState extends State<MyForm> {
  final _controller = TextEditingController();

  @override
  void initState() {
    super.initState();
    // テキストの変更を監視
    _controller.addListener(() {
      print('テキストが変更されました: ${_controller.text}');
    });
  }

  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: _controller,
    );
  }

  @override
  void dispose() {
    _controller.dispose();  // 忘れずに解放！
    super.dispose();
  }
}
```

## 便利な機能たち ⭐️

### 1. パスワード入力
```dart
TextField(
  obscureText: true,  // ●●●● と表示される
  decoration: InputDecoration(
    labelText: 'パスワード',
  ),
)
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3929117/7f614b1e-3345-f262-7910-d7de764e8689.png)


### 2. 数字だけ入力可能にする
```dart
TextField(
  inputFormatters: [
    FilteringTextInputFormatter.digitsOnly,  // 数字のみ許可
  ],
  decoration: InputDecoration(
    labelText: '年齢',
  ),
)
```

### 3. 複数行の入力
```dart
TextField(
  maxLines: 5,  // 5行まで入力可能
  decoration: InputDecoration(
    labelText: 'メモ',
  ),
)
```

## やってみよう！ 💪

1. シンプルなログインフォーム
```dart
Column(
  children: [
    TextField(
      decoration: InputDecoration(
        labelText: 'ユーザー名',
        icon: Icon(Icons.person),
      ),
    ),
    TextField(
      obscureText: true,
      decoration: InputDecoration(
        labelText: 'パスワード',
        icon: Icon(Icons.lock),
      ),
    ),
    ElevatedButton(
      onPressed: () {
        print('ログインボタンが押されました');
      },
      child: Text('ログイン'),
    ),
  ],
)
```

2. 入力チェック付きの問い合わせフォーム
```dart
Form(
  key: _formKey,
  child: Column(
    children: [
      TextFormField(
        decoration: InputDecoration(labelText: 'お名前'),
        validator: (value) {
          if (value.isEmpty) return '名前を入力してください';
          return null;
        },
      ),
      TextFormField(
        decoration: InputDecoration(labelText: 'メールアドレス'),
        validator: (value) {
          if (!value.contains('@')) return '正しいメールアドレスを入力してください';
          return null;
        },
      ),
      ElevatedButton(
        onPressed: () {
          if (_formKey.currentState.validate()) {
            print('送信できます！');
          }
        },
        child: Text('送信'),
      ),
    ],
  ),
)
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3929117/00340d1a-82b5-86f9-b7fc-31fdeecc912f.png)


## 困ったときは？ 🆘

- テキストが入力できない
  → enabledがfalseになっていないか確認
- バリデーションが動かない
  → FormとFormKeyの設定を確認
- 入力制限がかからない
  → inputFormattersの設定を確認