Flutter:TextField

Flutter
スポンサーリンク

はじめに

初めまして、さはらさんのご厚意で、今回、初めてこのブログで記事を書かせていただくHideといいます。

みなさんにもこの記事を見て、Flutterに興味をもってもらえればいいなと思っています。

 

さて、今回は、FlutterのTextFieldについて紹介していきます。

TextFieldとは

TextFieldは日常の非常にたくさんなところに使われており、例えば、Googleで検索を行う際に文字を入力するところ、あるサイトにLoginするときにIDやPasswordを入力するところ、これらもすべて、TextFieldです。

 

では、そんなTextFieldにどんな機能があるのか紹介していきます。

文字を入力できる

文字を入力できるようにするのは簡単で、TextFieldを生成するだけで可能になります。

 

入力する文字の色や大きさを変える

文字の色や大きさは、TextFieldのstyleプロパティで実現できます。

 

下記のコードのように、styleプロパティにTextStyleを生成します。

TextStyleのプロパティのfontSizeが文字の大きさ、colorが文字の色を意味しており、fontSizeが20.0に、colorが青に設定されています。

入力文字数に制限をかける

maxLengthプロパティを利用することで実現できます。

下記のコードのように、入力できる最大の文字数をmaxLengthプロパティに渡すことで5文字以上の文字が入力できないようになります。

 

注意:これは初期値でmaxLengthEnforcedがtrueになっているからであり、maxLengthEnforcedがfalseの場合は、右下に0/5{(入力文字数)/(最大入力数)}と表示されるのみで入力数制限はありません。

入力した文字を保存する

入力した文字を保存するにはTextEditingControllerを用います。

 

まず、クラス内にTextEditingControllerをもつ定数を用意します。

その定数をTextFieldのcontrollerプロパティに渡せば、入力した文字を保存することが可能です。

 

myControllerに保存されている文字を利用する際はcontroller.textでつかうことができます。

まとめ

今回はTextFieldに関するいろいろな機能についてご紹介させていただきました。

 

もし、わかりにくいところや間違ってるぞってところがあれば、教えていただけるとありがたいです。

コメント