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

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

テキスト入力の種類 📝

Flutterには主に3つのテキスト入力方法があります：

1. TextField（シンプルな入力欄）
2. TextFormField（バリデーション付き入力欄）
3. TextEditingController（高度な入力制御）

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

基本的な使い方

TextField(
  onChanged: (text) {
    print('入力された文字: $text');
  },
)

いろいろなカスタマイズ

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

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

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

Form(
  key: _formKey,  // フォームを識別するためのキー
  child: TextFormField(
    decoration: InputDecoration(
      labelText: 'メールアドレス',
    ),
    validator: (value) {
      if (value.isEmpty) {
        return '必須入力です！';
      }
      if (!value.contains('@')) {
        return '@マークを入れてください！';
      }
      return null;  // エラーなし
    },
  ),
)

v

3. 高度な制御（TextEditingController） 🎮

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

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. パスワード入力

TextField(
  obscureText: true,  // ●●●● と表示される
  decoration: InputDecoration(
    labelText: 'パスワード',
  ),
)

2. 数字だけ入力可能にする

TextField(
  inputFormatters: [
    FilteringTextInputFormatter.digitsOnly,  // 数字のみ許可
  ],
  decoration: InputDecoration(
    labelText: '年齢',
  ),
)

3. 複数行の入力

TextField(
  maxLines: 5,  // 5行まで入力可能
  decoration: InputDecoration(
    labelText: 'メモ',
  ),
)

やってみよう！ 💪

1. シンプルなログインフォーム

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('ログイン'),
    ),
  ],
)

1. 入力チェック付きの問い合わせフォーム

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('送信'),
      ),
    ],
  ),
)

困ったときは？ 🆘

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