• 接著要來製作登入頁面， 會有一個圖片logo、一個密碼輸入框、一個登入按鈕，可以用鍵盤輸入四位密碼

  先放上做好的成果！
  

• 那就開始來寫LoginPage.dart的程式碼

  1. 先import material package和Constants。這裡不需要儲存任何類型的資料，所以建立的是Stateless Widget，接著初始化一個負責處理文字編輯的TextEditingController。然後一樣要實作一個 build 方法。
     
  2. 接著要在build建立變數
  • Logo圖片
    • 先處理圖片：
      • 將要用的圖片放在我們建好的assets/images資料夾裡。
      • 接著更新一下pubspec.yaml檔案，來告訴Flutter將assets/images/資料夾中的圖像包含在app中。(要放在flutter:區塊才可以！)
    • 回到LoginPage.dart宣告Logo變數
      
  • 密碼輸入框
    • 接著是pinCode，是一個TextFormField，可以用來接收使用者輸入的PIN碼。
      
  • 登入按鈕
    • 這裡文章裡原本使用的是RaisedButton，但RaisedButton在Flutter2.0版本後就被棄用改為使用ElevatedButton了！
      
  • return Scaffold
    • Scaffold可以將建好的元件在 ListView 中組合在一起。
      

• main.dart

  • import LoginPage
  • 將home改為LoginPage()
    

• constants.dart

  • 宣告一些LoginPage會用到的新變數，最後會如下：
    

參考資料：
https://www.appcoda.com.tw/flutter-basics/