【5分でわかる】入力フォームの実装方法

本記事では、Flutterで入力フォームを実装する方法について解説していきます。

これから入力フォームを実装してみたい方は是非参考ください。

Flutterで入力フォームの実装する方法
TextFieldを使う方法
TextFormFieldを使う方法
まとめ

Flutterで入力フォームの実装する方法

Flutterで入力フォームを実装するには二つのメジャーなやり方があります。

TextFieldを使う
TextFormFieldを使う

では、それぞれ解説していきます。

TextFieldを使う方法

TextFieldはもっとも簡単にユーザーからの入力を受け付けてくれる方法です。

TextField class - material library - Dart API

API docs for the TextField class from the material library, for the Dart programming language.

具体的には以下のように実装します。

TextField(
  enabled: true,
  maxLength: 10,
  maxLengthEnforced: false,
  style: TextStyle(color: Colors.red),
  obscureText: false,
  maxLines:1 ,
)

プロパティで制御できる主な制御としては以下のようなものがあります。

maxLength…入力できる最大文字数
maxLines…一度に表示する最大行数
onChanged…ユーザーが入力値を変更したことを検知
onSubmitted…ユーザーの入力が完了したことを通知
readOnly…テキストを変更できるようにするか制御

など他にも数多くの制御項目が用意されています。

以下はTextFieldの変更を検知するonChangedプロパティを設定した例です。

TextFormFieldを使う方法

複数のForm系ウィジェット使えるようにするFormというウィジェットがあり、その配下でしようできるテキストフィールドがTextFormFieldです。

TextFormField class - material library - Dart API

API docs for the TextFormField class from the material library, for the Dart programming language.

TextFieldとは異なりより細かい入力制御をすることができます。

その細かい制御を実現してくれるプロパティがvalidatorプロパティです。

例えばメールアドレスに @ マークがついているか確認したい場合は以下のように実装します。

TextFormField(
  maxLength: 100,
  autovalidate: true,
  decoration: const InputDecoration(
    labelText: 'メールアドレス *',
  ),
  validator: (String value) {
    return !value.contains('@') ? '無効なメールアドレスです' : null;
  },
)

全体的な実装は以下になります。