【Flutter】TextFormFieldで入力フォームを作ってみた

はじめに

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,
                ),
              ),

参考文献

https://www.choge-blog.com/programming/fluttertextformfield-backgroundcolor/
https://www.choge-blog.com/programming/fluttertextformfield-roundedcorner/
https://qiita.com/sekitaka_1214/items/17cccc94a9e7150cdf3a
https://pryogram.com/flutter/textfield-change-cursor-color/