【Flutter】初心者必見！入力フォームってどうやって作るの？

こんにちは！
今回はflutterでの入力フォームの作り方について紹介いたします！
最後まで記事を読んでいただけたら嬉しいです！

1,入力フォームって何？

入力フォームは、ウェブサイトやアプリケーションでユーザーからテキストやデータを収集するための対話型な要素です。ユーザーがテキストを入力し、データを提供し、そのデータをアプリケーション内で処理するために使用されます。入力フォームは、ユーザーから情報を受け取るための主要な方法の一つで、ウェブページ、モバイルアプリ、デスクトップアプリなどで利用されています。

テキストフィールド:

ユーザーがテキストを入力できるフィールド。例えば、名前、メールアドレス、検索クエリ、コメントなど。

パスワードフィールド:

ユーザーがパスワードなどの機密情報を隠して入力できるフィールド。

選択フィールド:

ユーザーがオプションから選択できるセレクトボックス、ラジオボタン、チェックボックス、ドロップダウンリストなど。

ボタン:

フォームの送信やアクションのトリガーを提供するボタン。通常、フォームの送信を行うボタンが含まれます。

バリデーション:

入力データが有効であるかを確認するためのバリデーションルール。バリデーションエラーメッセージは、不正確なデータを修正するのに役立ちます。

送信:

ユーザーがフォームに入力したデータをアプリケーションやサーバーに送信するプロセス。

2,入力フォームの作り方

TextFieldウィジェットの追加:

テキスト入力フォームを作成するには、TextFieldウィジェットを使用します。

TextField(
  decoration: InputDecoration(
    labelText: '名前', // ラベル
  ),
)

フォームの送信ボタンの追加:

フォームデータを送信するためのボタンを追加します。例えば、ElevatedButtonウィジェットを使用して、送信ボタンを作成できます。

ElevatedButton(
  onPressed: () {
    // フォームが送信されたときの処理を記述
  },
  child: Text('送信'),
)

バリデーションの追加:

フォームデータが有効であることを確認するために、バリデーションを追加することが一般的です。例えば、TextEditingControllerを使用してフォームデータを取得し、バリデーションを行います。

final nameController = TextEditingController();
// バリデーションルールを追加
if (nameController.text.isEmpty) {
  // エラーメッセージを表示するか、エラー処理を行う
}

3,使用例

TextField(
            decoration: InputDecoration(
              labelText: "日本語入力",
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(10.0), // 枠線の角の丸みを設定
              ),
            ),
          ),
        ElevatedButton(
          onPressed: () {
            // フォームが送信されたときの処理を記述
          },
          child: Text('送信'),
        )

4,最後に

今回の紹介は以上になります！
最後まで見ていただきありがとうございました！
では、また次の記事で〜！