はじめに
TextFormFieldを使う機会があり、これを機に勉強しようと考えた
今回、作るもの
ログインや新規登録で用いる上記のような入力フォームを作っていきます！
必要なものを洗い出す
・入力フォーム周りの枠線がない
・入力背景が『グレー』
・入力中は上に文字でわかりやすくしている
・入力していない時はパスワードと書いている。
・入力する時のバーがグレー。（Themeによるが）
入力フォーム周りの枠線をなくす方法
デザインを変える時はdecorationを使って表示します！
答えInputdecoration()にfillColorを設定する。
decoration: InputDecoration(
border: InputBorder.none,
),
背景色を変えるにはどうすればいいの？
答えInputdecoration()にfillColorを設定する。
decoration: const InputDecoration(
fillColor: Colors.grey,
filled: true, //これをtrueにしないと背景色は変わらないから注意
),
入力中に文字を上に表示させる方法
答えInputdecoration()にlabelTextプロパティを設定する。
decoration: InputDecoration(
labelText: 'パスワード',
),
入力していない時はパスワードと表示させる方法
答えInputdecoration()にhintTextプロパティを設定する。
decoration: InputDecoration(
hintText: 'パスワード',
),
入力フォーム周りの枠線をなくす方法
答えTextFormField()のcursorColorで色を設定する。
TextFormField(
cursorColor: const Color.fromRGBO(131, 124, 124, 1),
),
全体のコード
TextFormField(
cursorColor: const Color.fromRGBO(131, 124, 124, 1),
decoration: const InputDecoration(
labelText: 'IDまたはメールアドレス',
fillColor: Color.fromRGBO(240, 240, 240, 1),
filled: true,
border: InputBorder.none,
),
),
const SizedBox(
height: 8,
),
TextFormField(
cursorColor: const Color.fromRGBO(131, 124, 124, 1),
decoration: const InputDecoration(
labelText: 'パスワード',
fillColor: Color.fromRGBO(240, 240, 240, 1),
filled: true,
border: InputBorder.none,
),
),
参考文献
Discussion