もっぺんプログラミング(´・ω・`)

もっぺん頑張って副業プログラマを目指してます。

100日後にFlutter生活:18日目:ログイン画面をパクってみる。(つづき)

引き続き、Youtube動画を見ながら FlutterのUIを勉強中です。
3:30くらいまで来ました。

www.youtube.com

Email 入力欄を追加しました。
ふむふむ。

f:id:momoizo:20210204024315p:plain

Container のWidgetでも、decoration、borderRadius、boxShadow などを上手く使えば、オシャレに見えますね!
センタリングなどは、Column に任せればいいということなのかな。

child: Padding(
  padding: EdgeInsets.all(20),
  child: Column(
    children: <Widget>[
      SizedBox(
        height: 60,
      ),
      Container(
        padding: EdgeInsets.all(20),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(10),
          boxShadow: [
            BoxShadow(
                color: Color.fromRGBO(225, 95, 27, .3),
                blurRadius: 20,
                offset: Offset(0, 10))
          ],
        ),
        child: Column(
          children: <Widget>[
            Container(
              decoration: BoxDecoration(
                border: Border(
                  bottom: BorderSide(color: Colors.grey[200]),
                ),
              ),
              child: TextField(
                decoration: InputDecoration(
                    hintText: "Email or Phone number",
                    hintStyle: TextStyle(color: Colors.grey),
                    border: InputBorder.none),
              ),
            ),
          ],
        ),
      ),
    ],
  ),
),