タグ: TextFormField

投稿日:

2020/10/18 Flutter : Create and style a text fieldの訳

テキストフィールドを使うと、アプリ内でユーザーが文字列を入力することができます。フォームの構築・メッセージ送信・検索機能の実装、その他で使用されます。ここではテキストフィールドの作り方とスタイルの整え方について見ていきます。

FlutterにはTextFieldウィジェットと、TextFormFieldウィジェットの二つのウィジェットが提供されています。

TextField

TextFieldウィジェットはテキスト入力ウィジェットとして最も一般的なウィジェットです。

デフォルトでは、TextFieldの外見はアンダーラインです。

decorationプロパティにInputDecorationクラスのインスタンスを設定することで、ラベル・アイコン・インラインヒントテキスト・エラーテキストなどを追加することができます。

デコレーションを完全に削除するには（下線とラベル用に予約されているスペースを含む）、decorationプロパティをnullに設定します。

TextField(
  decoration: InputDecoration(
    border: InputBorder.none,
    hintText: 'Enter a search term'
  ),
);

テキストフィールドの入力値(文字列)が変化した時にその値を取得したい場合は、Handle changes to a text field をご覧ください。

TextFormField

TextFormFieldウィジェットは、TextFieldウィジェットをラップし、Formとして統合するためのウィジェットです。

TextFormField(
  decoration: InputDecoration(
    labelText: 'Enter your username'
  ),
);

入力のバリデートに関しては、Building …

投稿日:

2020/10/17 Flutter : Build a form with validationの訳

テキストフィールドにユーザが情報を入力することが必要な場面がapp(アプリケーション・サービス)にはあります。例えば、メールアドレスとパスワードのセットを用いて、ユーザーにログインしてもらう必要がある場合です。

appを安全で利用しやすいものにするために、ユーザーから提供されたデータが有効なデータかを確認する必要があります。もしユーザーが正しいデータをフォームに入力した場合、処理を進めます。不正なデータでサブミットしようとした場合、エラーメッセージを表示して、何が問題かをユーザーに示す必要があります。

このサンプルでは、一つのテキストフィールドを持つフォームにバリデーションを追加する方法を以下のステップで学んでいきます。

 

  1. GlobalKeyを用いてFormを生成する。
  2. TextFormFieldをバリデーションロジックと共に追加する。
  3. バリデーションとサブミットを行うためのボタンを設置する。

1.GlobalKeyを用いてFormを生成する。

まずFormを生成します。Formウィジェットは複数のフォームフィールドをグループ化しバリデートするためのコンテナとしての役割を持ちます。

フォームを生成する時、GlobalKeyを用意します。このGlobalKeyによりそれぞれのフォームを一意(ユニーク)に識別します。そしてこの後のステップでバリデートできるようになります。

// カスタムフォームウィジェットを定義します。

class MyCustomForm extends StatefulWidget {
  @override
  MyCustomFormState createState() {
    return MyCustomFormState();
  }
}

// MyCustomFormウィジェットに対応するStateクラスを定義します。
// このクラスがフォームに関するデータを保持します。
class MyCustomFormState extends State<MyCustomForm> {
  // フォームウィジェットを一意(ユニーク)に識別するし、
  // フォームのバリデーションを可能にするためにglobal keyを生成します。 
  //
…