今天來講一下 Flutter 的大概架構~

用 VSCode 打開昨天的專案，不要被左側一堆資料夾嚇到，我們主要會用到依照常用的大概會是 lib、android、ios和 test，另外還有 pubspec.yaml 檔案。

lib 資料夾：後續寫的程式碼都會放在這個資料夾中，可以打開現在的 lib 會發現有一支 main.dart，就是目前主要執行的程式檔案。

打開 main.dart，一樣不要被一堆註解碼嚇到，可以先將註解碼刪掉，恐懼的心會下降許多（？）

程式碼由上往下，會先看到引入的語句，接著是我們在練習 dart 時常看到的程式主進入點 main()，最後就會看到 Widget，終於到了今天的重點（？）

基本上 flutter 畫面就是一個一個 Widget 組成的，可以把它想成是容器或組件，下面來一個簡單常 widget 架構，裡面會包含一些常用的 Widget：

• Scaffold（可以想成是鷹架，整體佈局從這個大框架開始，內部再去定義內容組件）
  • AppBar（頂部導覽列）
  • Container（Content 常用容器，像一個 box 一樣，可以有背景、邊框、邊距等）
    • Column（Row 與 Column是用來排列 widget 的容器，可以很方便的排版）
      • Row
        • Text（顯示標題文字內容的元件）
        • Icon（Flutter 中已經內建蠻多豐富 icons 可以使用）
      • Text
      • Image (圖片 widget)
      • Button（基礎按鈕，本身帶有 onPressed 方法的元件）

而 Widget 又分為無狀態（Stateless）或有狀態（Stateful），當我們想要在渲染畫面後利用狀態改變重新渲染，就可以使用 **setState 來做狀態管理，可以透過我們昨天的專案看到預設的專案程式碼 _incrementCounter 方法中，就有 setState 的用法，不過因為一直渲染的話，可能會有效能問題，所以還是要謹慎使用。

下一篇我們來詳細一點介紹 Stateless VS Stateful

OK！我們明天見～