FlutterのTextFieldの備忘録
目次
最大文字数を設定する
最大文字数を設定する方法は2つあるようである。
1つ目はmaxLengthを直接指定する方法である。
TextField(
maxLength: 10,
)
こちらの場合は現在の文字の入力数と最大数が表示される。
いや表示してほしくないんだがな...という方は次のinputFormattersを指定する方法が有効である。
TextField(
inputFormatters: [
LengthLimitingTextInputFormatter(1),
],
)
こちらの場合は現在の文字数と最大文字数が表示されない。
カーソルを非表示にする
テキストを入力しようとすると出てくる縦線のカーソルを消す。
TextFieldのshowCursorをfalseにする。
TextField(
showCursor: false,
)
中央揃えにする
testAlignにTextAlign.centerを入力すればよい。
TextField(
textAlign: TextAlign.center
)
そのほかにもleft, right, justify, start, endが指定できそうである。
leftが左揃え、rightが右揃え、justifyが両端揃えというのは分かったが、start, endってなんだ？と思ったので調べた。
startは、言語の始まりに合わせるという意味らしい（そのままやな...)。
日本語の場合は左から右に読む言語なので、左揃えになるが、世界には右から左に読んでいく言語もあるらしい。その場合は右揃えにしてくれるらしい。
へぇ～便利な時代やねぇ。
下線を消す
テキストの周り（枠の部分とかかな？）の処理はTextFieldのdecorationにInputDecorationクラスのインスタンスを入れることで、指定できるようである。
今回は下線を消したいので、InputBorder.noneを指定した。
TextField(
decoration: InputDecoration(
border: InputBorder.none
)
)
他にもUnderlineInputBorder()やOutlineInputBorder()を指定できるようである。
Underlineは初期の下線だと思われる。Outlineの方はテキストフィールドを囲う四角形を書くことができる。
TextField(
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(10.0))
)
)
)
OutlineInputBorderには、引数を指定することでいろいろ境界線を変えれそうである。
丸いテキストフィールドがたくさんwww。
ただ、半径の指定をするためだけに、かなりたくさんのクラスを見る必要があって、なんか面倒だなぁ...と感じてしまった。Border.Radius.allは四隅全部を指定するために必要。左上のみを指定するなどができるっぽい。Radius.circular(radius)も別メソッドとして、Radius.elliptical(x,y)が用意されている。こちらはx,yを指定することで、楕円にすることができるらしい。