先生と生徒の会話形式で理解しよう

生徒

「Flutterで名前やメールアドレスを入力するフォームを作りたいんですが、どうすればいいですか？」

先生

「Flutterでは、TextFieldやTextFormFieldを使えば、簡単に入力フォームを作ることができますよ。」

生徒

「その2つって何が違うんですか？あとバリデーションとかもできるんですか？」

先生

「では、Flutterでの入力フォームの作り方と、TextFieldとTextFormFieldの違いを詳しく見ていきましょう！」

1. Flutterで入力フォームを作るには？

Flutterでテキスト入力フォームを作るときに使用するのが、TextFieldとTextFormFieldです。どちらもユーザーから文字入力を受け取るためのウィジェットですが、機能や使い方に違いがあります。

シンプルにテキストを入力したいだけならTextField、バリデーションやフォームの管理をしたい場合はTextFormFieldを使うのが一般的です。

2. TextFieldの基本的な使い方

TextFieldは、Flutterで最も基本的な入力フィールドです。入力イベントを簡単に取得したい場合や、軽量なUIを作りたいときに便利です。


TextField(
  decoration: InputDecoration(
    labelText: 'ユーザー名',
    border: OutlineInputBorder(),
  ),
  onChanged: (value) {
    print('入力中: $value');
  },
)

decorationでラベルや枠線の設定ができ、onChangedで入力中のテキストをリアルタイムで取得できます。

3. TextFormFieldの特徴と使い方

TextFormFieldは、TextFieldを拡張したようなもので、Formウィジェットの中で使うことを前提に設計されています。バリデーションの追加や状態管理がしやすく、複数の入力フィールドを扱う場面で重宝されます。


TextFormField(
  decoration: InputDecoration(
    labelText: 'メールアドレス',
    border: OutlineInputBorder(),
  ),
  validator: (value) {
    if (value == null || value.isEmpty) {
      return 'メールアドレスを入力してください';
    }
    return null;
  },
)

このようにvalidatorを使うことで、空欄チェックや形式チェックなどのバリデーションが実現できます。

Flutterを「実務レベル」で使えるようになりたい人や、 iPhone / Android両対応アプリ開発の流れをまとめて学びたい人には、定番の実践書がこちらです。

Flutter実践開発をAmazonで見る

※ Amazon広告リンク

4. TextEditingControllerを使って値を取得・設定

どちらのウィジェットも、TextEditingControllerを使えば、フォームの内容を取得したり、プログラムから値を設定することができます。


final _controller = TextEditingController();

TextField(
  controller: _controller,
  decoration: InputDecoration(
    labelText: 'コメント',
  ),
)

ElevatedButton(
  onPressed: () {
    print('送信内容: ${_controller.text}');
  },
  child: Text('送信'),
)

このようにcontroller.textで現在の入力内容を取得可能です。送信ボタンと組み合わせて使う場面が多いです。

5. Formウィジェットで複数の入力をまとめて管理

TextFormFieldを使うときは、必ずFormウィジェットと一緒に使うのが基本です。Formにはkeyを設定し、validate()メソッドで一括チェックができます。


final _formKey = GlobalKey<FormState>();

Form(
  key: _formKey,
  child: Column(
    children: [
      TextFormField(
        decoration: InputDecoration(labelText: 'パスワード'),
        obscureText: true,
        validator: (value) {
          if (value == null || value.length < 6) {
            return '6文字以上で入力してください';
          }
          return null;
        },
      ),
      ElevatedButton(
        onPressed: () {
          if (_formKey.currentState!.validate()) {
            print('バリデーション成功');
          }
        },
        child: Text('送信'),
      ),
    ],
  ),
)

これで複数のフォーム項目をまとめてチェックでき、バリデーションロジックの管理も簡単になります。

6. Flutterでのフォーム装飾とエラーメッセージのカスタマイズ

InputDecorationは、FlutterのフォームUIを整えるのに重要な役割を果たします。labelTextの他にもhintText（ヒント）やerrorText（エラー表示）、prefixIcon（アイコン追加）など多くのオプションが用意されています。


TextField(
  decoration: InputDecoration(
    labelText: 'ユーザー名',
    hintText: '例: yamada123',
    prefixIcon: Icon(Icons.person),
    border: OutlineInputBorder(),
    errorText: '未入力です',
  ),
)

見た目を整えることでユーザーにとって使いやすい入力UIを作成できるため、UI/UXの向上にもつながります。

7. Flutterのフォームでよく使うオプションまとめ

フォームの入力ウィジェットで使える便利なオプションを以下にまとめておきます。

obscureText：パスワード入力時に●で隠す
keyboardType：メール・数字など入力タイプの指定
maxLines：複数行入力可能に
readOnly：入力不可にする
enabled：入力を一時的に無効化

これらをうまく活用すれば、より実用的なFlutterフォームを作成できます。

Flutterの入力フォーム作成！TextField・TextFormFieldの基本を初心者向けに解説