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ウィジェットは、TextFieldウィジェットをラップし、Formとして統合するためのウィジェットです。

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

入力のバリデートに関しては、Building a form with validation をご覧ください。

参考