技術記事

micomia株式会社の井上です。今回はText Fieldについて解説していきます。

初心者にもわかりやすく解説していくのでぜひご一読ください。

1. Text Fieldとは

Text Fieldは、ユーザーが何かを入力する際に使用するWidgetです。メールアドレスやパスワードから、投稿作成時の入力欄まで幅広く使用できます。

2. Text Fieldの実装方法

Text Fieldは他のWidgetと同じように実装できます。

3. Text Fieldの詳細設定

まず、WidthはText Fieldの幅を設定できます。

デフォルトで200pxが入っていますが、右端にある∞のアイコンを押すことでinf(無限)にすることができます。

こうすることで、text fieldの横幅は固定値になるので画面自体の横幅が変わっても常に同じ値になります。

今はColumnにPaddingをつけているので全体に広がっていませんが、Paddingを無くすと、このようになります。

その下のMin Lines, Max Linesは最小と最大の行数を指定することができます。

その下のInitial Valueはユーザーが入力する前から表示されている値です。例えば+81を最初から表示させておきたいとき、+81をInitial Valueとしてセットしておくと+81が入った状態で入力を始めることができます。

その下にあるLabel TextはText Fieldのラベルとなる部分を追加できます。

例えば、今回であれば「電話番号」と入れると電話番号を入力しないといけないことが一目でわかります。

Label Textはラベルなのでユーザーが入力中に常に表示されることになります。

入力するときは消えておいて欲しい、でも何の入力欄なのかを表示させたいのであれば、下にあるHint Textを使用します。

Hint Textで設定することで入力中は表示されない状態でtext fieldに入力することができます。

次に、Input Decoration Propertiesを見ていきます。

Input Border Typeは3種類あります。

1つ目のUnderlineはText Fieldの下側に線が表示されます。

Outlineは全体を囲んでいる状態になります。

Noneは何もない状態です。

一般的によく使われているText Fieldを作る場合はまずOutlineにして、Fill Colorを設定します。

Border Colorは周りの枠線の色を設定でき、Focus Border ColorはユーザーがそのText Fieldに入力しているときの枠線の色を設定できます。

今回は一旦Fill Colorと同じカラーで設定します。

あとは、Border Radius(角の丸み)を18くらいにしておきます。

すると、このようによく目にするText Fieldになります。

最後に、プロパティパネルの一番下にあるAdditional Propertiesを見ていきます。

まず、Show Clear Field IconをONにするとText Fieldに入力している内容を全て消すアイコンを入れることができます。

AutofocusをONにすると、このページに来たときに自動的にText Fieldにカーソルが合い、キーボードが表示されるようになります。

Auto Fill Hint Optionsは、このText Fieldが何を入力するものなのかを教えてあげるものになります。

これを設定することによって、例えばGoogleやChromeがメールアドレスやパスワードを覚えていた場合、ユーザーは指紋や顔認証などを使用して自動的に入力することができます。

Update Page On Focus Changeは、ユーザーがそのText Fieldにフォーカスしたときにページが変わるようになります。

その下のUpdate Page On Text ChangeはTextを打ったときにページが変わるようになります。

Update Delayはページが更新される読み込みの時間を指します。2000msは2秒かかるのであまり使わず、大体500msくらいを使用することが多いです。

Read Onlyはチェックを入れると入力できなくなります。表示だけさせたいときに有効です。

Cursor Colorはカーソル(画像参照)のカラーを変えることができます。

その下のKeyboard Typeは、例えば数字のみの入力を受け付ける場合はNumberにすると、Text Fieldを押した際に自動的に数字のキーボードが表示されるようになります。

Submit TypeはEnterを押したときにどのような動きになるかを設定できます。

Nextだと次のText Fieldに移るイメージです。

Max Lengthに文字数を指定してMax Length EnforcementをEnforcedにすることで、文字数の制限をかけることができます。

Hide Max Length CounterはONにすることで文字数カウントの表示を消すことができます。個人的には、カウンターがある方が今何文字入力しているのかわかりやすいのでOFFにすることをおすすめします。

4. さいごに

今回はText Fieldについて解説していきました。このWidgetは最も使われるものですが非常にたくさんの機能があるので、使われる際は本記事も参考にしながらいろんな機能を試してみてください。

本記事の内容を動画で見たい方は以下をご覧ください。

動画でもっと知りたい方はこちら