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

生徒

「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の違いや使い方について詳しく整理しました。Flutterフォーム作成はモバイルアプリ開発やデスクトップアプリ開発において非常に重要な要素であり、ユーザー入力を扱うすべてのアプリケーションにおいて必須の知識となります。特にFlutter初心者にとってはTextFieldとTextFormFieldの違いを正しく理解することが、効率的なアプリ開発への第一歩になります。

TextFieldはシンプルなテキスト入力を実現するための基本ウィジェットであり、軽量で扱いやすいのが特徴です。入力イベントをリアルタイムで取得したい場合や簡単なUIを構築したい場合には非常に適しています。一方でTextFormFieldはFormウィジェットと組み合わせて使用することで、入力チェックやバリデーション処理を簡単に実装できる強力なウィジェットです。複数の入力項目を持つログイン画面や登録フォームではTextFormFieldが必須と言えるでしょう。

Flutterの入力フォームではTextEditingControllerの活用も重要です。controllerを利用することで、入力された値をプログラム側から取得したり、初期値を設定したりすることが可能になります。例えば送信ボタンと組み合わせることで、ユーザーが入力したデータをAPIに送信する処理や、画面遷移時にデータを引き継ぐ処理を簡単に実装できます。このような仕組みを理解することで、より実践的なFlutterアプリ開発が可能になります。

またFormウィジェットを利用することで、複数のTextFormFieldをまとめて管理し、一括でバリデーションチェックを行うことができます。validateメソッドを使えば、すべての入力項目を一度にチェックできるため、入力ミスの防止やユーザー体験の向上につながります。特にメールアドレスやパスワードの入力チェックなどは、実務でも頻繁に利用される重要な処理です。

InputDecorationによるUIカスタマイズも忘れてはいけません。labelTextやhintText、errorText、prefixIconなどを活用することで、見た目が分かりやすく使いやすいフォームを作成できます。ユーザーにとって使いやすいインターフェースを提供することは、アプリの品質を高めるうえで非常に重要です。FlutterではこうしたUI調整が柔軟に行えるため、デザインと機能の両立がしやすいのも大きな魅力です。

さらにobscureTextやkeyboardTypeなどのオプションを適切に設定することで、入力内容に応じた最適なUIを提供できます。例えばパスワード入力では文字を隠す設定を行い、メールアドレス入力では専用のキーボードを表示することで、ユーザーの入力ミスを減らすことができます。こうした細かな工夫の積み重ねが、使いやすいアプリ開発につながります。

Flutterフォーム開発において重要なのは、単に入力欄を作るだけではなく、入力値の取得、バリデーション、UI設計、ユーザー体験のすべてを意識することです。今回学んだTextFieldとTextFormFieldの基本、TextEditingControllerの使い方、Formによる管理方法、InputDecorationのカスタマイズをしっかり身につけることで、実務でも通用するフォーム開発スキルを習得できます。これらを繰り返し実装しながら理解を深めていきましょう。

入力フォーム処理の基本確認サンプル


public class FlutterFormCheck {
    public static void main(String[] args) {
        String input = "テスト入力";
        if (input != null && !input.isEmpty()) {
            System.out.println("入力内容が正しく取得できています");
        } else {
            System.out.println("入力内容を確認してください");
        }
    }
}


入力内容が正しく取得できています

上記のようなシンプルな確認処理を行うことで、入力値の取得やバリデーションの基本的な考え方を理解することができます。Flutterでも同様に、入力値が空でないか、条件を満たしているかを確認する処理が重要になります。

先生と生徒の振り返り会話

生徒

Flutterの入力フォームはTextFieldとTextFormFieldの違いを理解することが大切だと分かりました。用途によって使い分ける必要があるんですね。

先生

その通りです。シンプルな入力にはTextField、バリデーションや複数入力の管理にはTextFormFieldを使うのが基本です。

生徒

TextEditingControllerで値を取得する方法も理解できました。ボタンと組み合わせて使う場面が多そうですね。

先生

はい。フォーム入力と送信処理はセットで使われることが多いため、controllerの理解はとても重要です。

生徒

InputDecorationで見た目を整えることで、ユーザーが使いやすくなるという点も印象的でした。

先生

ユーザー体験を意識したUI設計はアプリ開発において非常に重要です。見た目と機能の両方を意識しましょう。

生徒

バリデーションやフォーム管理も含めて、Flutterの入力処理の流れがよく分かりました。実際にアプリで試してみます。

先生

実際に手を動かして学ぶことが一番の近道です。今回の内容をもとに、ログイン画面や登録フォームを作ってみましょう。

この記事を読んだ人からの質問

プログラミング初心者からのよくある疑問／質問を解決します

Flutterでテキスト入力フォームを作成したいのですが、TextFieldとTextFormFieldのどちらを使えば良いですか？

Flutterの開発において、どちらのウィジェットを選択するかは「バリデーション（入力チェック）が必要かどうか」が大きな判断基準となります。シンプルな検索窓や、単一のテキスト入力をリアルタイムで取得したいだけであれば、軽量で扱いやすいTextField（テキストフィールド）がおすすめです。一方で、ユーザー登録画面やログイン画面のように、メールアドレスの形式チェックや空欄チェック、複数の入力項目を一括管理・送信する必要がある場合は、TextFormField（テキストフォームフィールド）を使用するのが一般的です。TextFormFieldは、内部的にTextFieldをラップしており、Formウィジェットと連携して高度な状態管理やエラー表示を行う機能が備わっています。初心者のうちは、まずTextFieldで入力の基本を学び、慣れてきたらバリデーション機能を持つTextFormFieldに挑戦するとスムーズに学習が進みます。

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