TextField

1.TextEditingControllerインスタンスを生成する。

ユーザーがテキストフィールドに入力したテキストを取得するために、TextEditingControllerインスタンスを生成し、TextFieldウィジェット・あるいはTextFormFieldウィジェットのプロパティに設定します(渡します)。

important:TextEditingControllerを使用し終えたら、disposeメソッドを呼び出しましょう。これによりもう使用しないオブジェクトがリソースを占有し続ける状況を避けることができます。

// カスタムのフォームウィジェット「MyCustomForm」クラスを宣言します。 class MyCustomForm extends StatefulWidget { @override _MyCustomFormState createState() => _MyCustomFormState(); } // 対応するStateクラスを定義する。 // このクラスがフォームのデータを保持する。 class _MyCustomFormState extends State<MyCustomForm> { // ↓text controllerを生成する。 //後にこのコントローラーを使用してテキストフィールドの現在の値を取得する。 final myController = TextEditingController(); @override void dispose()

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

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

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 …

タグ: TextField

2020/10/18 Flutter : Retrieve the value of a text fieldの訳

1.TextEditingControllerインスタンスを生成する。

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

TextField

TextFormField