• 首先先把要新增的資料夾及檔案建好！

  • 在根目錄新增assets/images資料夾來放置圖片
  • 在lib新增helpers/constants.dart資料夾及檔案，放置一些App會用到的常數數值
  • 在lib新增一個LoginPage.dart頁面
    
  • 建好後會多這些資料夾、檔案：
    

• 製作主頁(Main Page)

  1. 先載入Android或iOS風格的package，再加入main( )：Dart的入口函數以及runApp( )：Flutter的入口函數
     
  2. • 位置： Constants.dart
     • 在這裡一樣先載入android的程式包，就可以用Color宣告一個變數appDarkGreyColor，賦予我們自己想要的顏色，例如這裡用的是深灰色，之後要使用這個深灰色就可以使用appDarkGreyColor變數。最後再宣告一個全域的 appTitle變數。
       
  3. • 位置：main.dart
     • Import constants.dart檔案，才能使用裡面宣告好的的變數和常數
       
  4. • 位置：main.dart
     • 建立主頁：
       
       • StatelessWidget：是一個無狀態的組件，內容在初始化之後就不會再更改（不需要改變物件狀態時可以使用，較省資源）
       • @override：覆蓋 StatelessWidget中的 build 方法
       • Widget：在flutter裡所有的東西都是Widget，而build方法的返回值類型必須是Widget
       • build方法：用來繪製畫面
       • return MaterialApp()：在 build 方法中，返回了一個 MaterialApp 的widget
       • MaterialApp的屬性：
         • debugShowCheckedModeBanner:控制App在測試模式下是否顯示 Debug 標誌，false為不顯示。
         • title:設置標題，appTitle則是我們在constants定義好的常數。
         • theme: new ThemeData(...)：設置主題，appDarkGreyColor是我們在constants定義好的主題顏色。
         • home: LoginPage()：設置首頁，這裡我們設置的是LoginPage，啟動之後就會顯示LoginPage的頁面。
  5. • 位置：test/widget_test.dart
     • 修改類別名稱，因為有改掉原本的類別名稱，所以這裡要更正才不會出現錯誤。
       

主頁的部分就先這樣~明天會接著完成首頁！

參考資料：
https://www.appcoda.com.tw/flutter-basics/
https://campus-xoops.tn.edu.tw/modules/tad_book3/page.php?tbsn=42&tbdsn=1353
https://medium.com/flutter-taipei/%E4%BE%86%E5%90%A7-flutter-3-%E7%AC%AC%E4%B8%80%E5%80%8Bflutter-app-35f62fa0c5fc