了解上面的意思後我們就可以開始了喔，再開始寫程式前我們先來做個簡單的構思吧！

Login頁面構思：由上而下 AppBar，標題，描述文字，email 輸入框，密碼輸入框，(Remember me 和 忘記密碼)，登入按鈕，使用(google、fb、twitter) 登入按鈕，註冊連結，這是我大概的想法，大家都可以發揮創意自己增加修改喔！
首先跟昨天一樣我要先來新增公用資料夾

再lib資料夾下的constants.dart新增程式碼

再來要設定全域的主題，我們會用到我們昨天所說的Theme，所以我們先在lib資料夾下新增theme.dart來存放之後會用到的Theme
theme.dart

再到main.dart作設定

再來就是這次的重點login的部分
先在lib資料夾底下的screens資料夾下新增一個login的資料夾，用來當作存放login畫面的地方，然後再建一個login_screen.dart來設定畫面，再來再login資料夾底下再建一個components的資料夾，用來放login畫面的元件，然後建一個body.dart來處理畫面的body、login_form.dart來處理login的表單
這邊有點像在繞口令，反正設定完要長這樣

接下來要在lib資料夾下的components資料夾裡建一個form_error.dart來設計共用表單發生錯誤時的錯誤提醒的widget
form_error.dart

login_form.dart

body.dart(這個是指login資料夾下components資料夾裡的body.dart，不要搞錯了喔！)

login_screen.dart

routes.dart(要把login串上去)

再splash資料夾下的body.dart補上login的連結

這樣就完成我的登入頁面了喔！
成果如下

完整程式碼

今日總結
做完今天的login頁面大家覺得怎麼樣呢？明天我們會繼續補上 忘記密碼頁、註冊頁，我們會發現設計模式都差不多，繼續動手做，一起征服它吧！