[Flutter] Form って何？

2023年4月28日2023年6月12日

Flutterにおいて、Formはユーザーからの入力を受け付けるための重要な要素の1つです。この記事では、Flutterにおけるフォームの基本的な使い方やプロパティについて説明します。

Formとは

Flutterにおいて、フォームとはユーザーからの入力を受け付けるためのウィジェットです。フォームには、テキストフィールド、ドロップダウン、ラジオボタン、チェックボックスなどの入力要素が含まれます。また、Flutterには、フォームに関連する機能を提供するFormウィジェットがあります。Formウィジェットは、フォーム内で入力されたデータを検証したり、送信したりするために使用されます。

基本的な使い方

まず、フォームを作成するには、Formウィジェットを使用する必要があります。Formウィジェットは、Form内に含めるフォーム要素を定義するためのウィジェットを子要素として持ちます。

以下は、基本的なフォームの例です。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Form Test'),
        ),
        body: Form(
          child: Column(
            children: <Widget>[
              TextFormField(
                decoration: InputDecoration(labelText: 'Name'),
              ),
              TextFormField(
                decoration: InputDecoration(labelText: 'Email'),
              ),
              ElevatedButton(
                onPressed: () {
                  // 送信ボタンが押されたときの処理を記述する
                },
                child: Text('Submit'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

上記の例では、Formウィジェットの子要素として、2つのTextFormFieldウィジェットと1つのElevatedButtonウィジェットが含まれています。TextFormFieldウィジェットは、テキスト入力フィールドを表し、ElevatedButtonウィジェットは、フォームを送信するためのボタンを表します。

使用できるプロパティと概要

Formウィジェットは、次のようなプロパティを持ちます。

autovalidateMode: 自動検証モードを設定します。自動検証モードでは、入力フィールドがフォーカスを失った時に、検証が自動的に実行されます。このプロパティは、AutovalidateMode列挙型の値を取ります。
onWillPop: フォームを閉じる前に呼び出されるコールバック関数を設定します。
onChanged: フォーム内のデータが変更されたときに呼び出されるコールバック関数を設定します。
child: Form内に含める子要素を設定します。

各プロパティの使い方

`autovalidateMode`

autovalidateModeプロパティは、フォームの自動検証モードを設定するために使用されます。以下は、このプロパティを使用して、フォームの自動検証モードを有効にする方法の例です。

autovalidateMode: AutovalidateMode.always,

`onWillPop`

onWillPopプロパティは、フォームを閉じる前に呼び出されるコールバック関数を設定するために使用されます。以下は、このプロパティを使用して、フォームを閉じる前に確認ダイアログを表示する方法の例です。

onWillPop: () async {
  bool confirm = await showDialog(
    context: context,
    builder: (context) => AlertDialog(
      title: Text('Are you sure?'),
      content: Text('Do you want to discard the form?'),
      actions: <Widget>[
        TextButton(
          onPressed: () => Navigator.of(context).pop(false),
          child: Text('No'),
        ),
        TextButton(
          onPressed: () => Navigator.of(context).pop(true),
          child: Text('Yes'),
        ),
      ],
    ),
  );

  return confirm;
},

`onChanged`

onChangedプロパティは、フォーム内のデータが変更されたときに呼び出されるコールバック関数を設定するために使用されます。以下は、このプロパティを使用して、フォーム内のデータが変更されたときに、変更されたデータを表示する方法の例です。

onChanged: (value) {
  print('Value changed: $value');
},

Form内で使用するウィジット

Flutterの入力フォームを構築するための便利なウィジェットを紹介します。細かな使い方はそれぞれ別記事でまとめましたので、よかったら見てみてください。

TextFormField

ユーザーがテキストを入力するためのウィジェットです。バリデーションを実行し、入力値を返します。テキストフィールドの外観をカスタマイズすることもできます。入力値を変更した場合、自動的にフォームの値が更新されます。

TextFormFieldについては別記事でまとめていますので、よかったらそちらも見てみてください。

DropdownButtonFormField

ユーザーがドロップダウンメニューからアイテムを選択するためのウィジェットです。複数の選択肢を提供できます。選択された値を返し、バリデーションを実行します。複数の選択肢がある場合、FormウィジェットのonSavedコールバック内で、選択されたアイテムをリストで受け取ることができます。

DropdownButtonFormFieldについては別記事でまとめていますので、よかったらそちらも見てみてください。

まとめ

Flutterにおけるフォームは、ユーザーからの入力を受け付けるための重要な要素の1つです。フォームを作成するには、Formウィジェットを使用し、フォーム内にテキストフィールド、ドロップダウン、ラジオボタン、チェックボックスなどの入力要素を配置します。Formウィジェットには、自動検証モードやフォーム送信時のコールバック関数などを設定するためのプロパティがあります。

フォームを作成する際には、以下の手順を参考にすることができます。

Formウィジェットを作成し、必要なプロパティを設定します。
フォーム内に配置する入力要素を作成します。例えば、テキストフィールド、ドロップダウン、ラジオボタン、チェックボックスなどです。
入力要素に対して、必要なプロパティを設定します。例えば、ラベル、初期値、有効性チェック、変更イベントなどです。
フォームを送信する場合は、フォーム内の入力要素のデータを取得し、送信するためのメソッドを実装します。

フォームは、ユーザーからの入力を処理するための重要な機能であるため、Flutterの開発においては必要不可欠な要素です。プロパティやコールバック関数をうまく活用することで、より使いやすく安全なフォームを作成することができます。

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！