2020/10/18 Flutter : Focus and text fieldsの訳工事中🏗

テキストフィールドが選択されて、入力を受け付ける状態を「フォーカス(focus)」と呼びます。

一般的にユーザーはテキストフィールドのフォーカスを移動する場合テキストフィールドをタップします。開発者はこのページで説明されているようなプログラムコードを用いてフォーカスを移動させます。

フォーカスの管理は、直感的なフローでフォームを作成するための基本的なツールです。例えば、テキストフィールドのある検索画面を考えます。

ユーザーが検索画面に来た時に、検索語句のためのテキストフィールドにフォーカスが当てられるべきです。そうすれば、ユーザーは自分でテキストフィールドをタップしてフォーカスを合わせること無しに、検索画面が表示されるとすぐに検索語句を入力できます。

このページでは、テキストフィールドの表示されるとすぐにフォーカスを与える方法、それに加えて、ボタンを押したらテキストフィールドにフォーカスを与える方法を学びます。

Contents

テキストフィールドの表示と同時にテキストフィールドにフォーカスを与える

テキストフィールドの表示と同時にテキストフィールドにフォーカスを与えるには、autofocusプロパティを使用します。

TextField(
  autofocus: true,
);

即時にフォーカスを移動させるのではなく、あるタイミングでフォーカスを与えたい場合もあるでしょう。例えば、

「APIコールのレスポンス」・あるいは「バリデーションエラー」が来た時に特定のテキストフィールドにフォーカスを与える、

というような場面もあるかもしれません。

今回のサンプルでは、ユーザーがボタンを押した時にテキストフィールドにフォーカスを与える例を以下の手順で学びます。

FocusNodeを生成します。

TextFieldにFocusNodeを渡します。

ボタンがタップされた時にTextFieldにFocusを与えます。

工事中🏗

参考