Flutter入門

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

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

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

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

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

  1. TextFieldを使う
  2. TextFormFieldを使う

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

TextFieldを使う方法

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

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

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です。

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

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

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

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

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

まとめ

いかがでしたか?

Flutterであれば、細かな入力制御を使ったテキストフィールドが簡単に作成できます。

この機会に是非習得してみてください。

最新のFlutterの勉強方法 まとめ

Flutterを入門から実践レベルまで一通り学習できる方法をまとめました。

Flutterの勉強方法を知る

Flutterを動画で学習する

Flutterを書籍で学習する