完成上一篇30天Flutter手滑系列 - 雙平台及IDE環境設定後，
開始要來寫點程式，是不是終於有點像在學個新技術了呢。

但是，別忘了Flutter是Dart語言，並不是Javascript(熱狗)也不是Java(狗)，還是得來稍微認識一下有什麼不同。

Dart學習之路

線上資源

• Dart官方網站
• Dart簡體中文網站
• DartPad: 測試Dart語法的線上編輯器
• Dart Announcements: 追蹤Dart有什麼新公告的地方
• Flutter簡體中文網站
• Stackoverflow:工程師交友交流平台

基本範例

透過以下官方範例我們來認識一下Dart語法與結構。

// Define a function.
printInteger(int aNumber) {
  print('The number is $aNumber.'); // Print to console.
}

// This is where the app starts executing.
main() {
  var number = 42; // Declare and initialize a variable.
  printInteger(number); // Call a function.
}

• // This is a comment.
  註解的方法跟一般常見的程式語言一樣。

• int
  在傳進函數的變數需要定義型別，如果寫過TypeScript的朋友應該不陌生，只是這裡int代表的是數字的資料型別，其他可定義的資料型別有String, List以及bool。

• 42
  一般的常數。

• print()
  用來輸出你想輸出的內容跟Javascript的console.log類似。

• '...' (or "...")
  字串的表達式，跟Javascript一樣，單引號跟雙引號皆可通用。

• $variableName (or ${expression})
  這是在字串中引用變數的表達式，稱作樣板字面值（Template literals），用法可以參考MDN 樣板字面值或是官方文件關於String的介紹。
  這是一個很方便的使用技巧，可以讓你組合字串時畫面簡潔容易閱讀。

• main()
  每個app必須必備的函數方法，一切的入口，並且回傳會是void。

• var
  這個跟Javascript一樣，宣告一個變數，但不會特別指定他的資料型別，其變數型別會取決於後來被賦予的值。

重要概念

• 每個變數都是一個 物件(Object) 的概念，而且每個物件都是類別(Class)的實例(instance)，並且繼承自Object這個類別，舉凡numbers、functions和 null都是一種物件。
• 盡量使用靜態型別，例如int，若沒有指定資料型別的變數會被視為一個動態的型別，這個做法可以在編譯時更有效率。
• Dart 支援泛型參數的寫法(generic types)，像是List<int>代表一個整數型別的List(a list of integers)或是List<dynamic>代表任意型別的List (a list of objects of any type)。
• Dart 支援top-level方法，像是main()，同時支援在類別裡面定義函數(靜態及實例方法)，也可以在方法定義方法成巢狀方式。
• 同上支援top-level變數，實例變數又被稱為域(fields)或屬性(properties)。
• 和Java不同，Dart並沒有public、private、protected這些keywords，會在名稱前加入()表示為私有。
• Dart開發工具編譯輸出若有警告(warning)，並不會阻止程式運行，若有錯誤(error)則會中斷執行。

關鍵字

這邊放上Dart1.9版列出的所有Keywords給大家參考

詳細文件

至於更具體詳細的變數，類別或是函數方法的編寫方式或範例，可以參考英文版或中文版。

實例導覽

最後我們用Flutter的Demo範例來複習一下Dart語法。

1. 打開lib/main.dart
2. 可以看到第三行這裡的main()是整個app的起始入口。
   
3. 初始化會呼叫MyApp()，MyApp繼承自StatelessWidget，並定義了App名稱、標題及皮膚(theme)。屬於無狀態更新的類別。
   
   註：Flutter的狀態管理會在後面提到，這邊僅先帶過。
4. 從28行開始定義了MyHomePage類別，並且繼承自StatefulWidget，在這裡會利用狀態的改變來更新每次點擊按鈕的次數。
   
5. 從46行開始，_MyHomePageState 詳細定義了私有的常數 _counter，增加計數器的方法_incrementCounter。
   
6. 在61行開始，有個新的Widget，並且回傳一個Scaffold，這是flutter用來快速設計佈局的Ｗidget，提供drawers、snack bars 和bottom sheets。

Scaffold 有下面幾個主要屬性：

• body：當前Widget顯示的內容。
• floatingActionButton：預設顯示在右下角的主按鈕。
• appBar：預設在上方顯示的AppBar或是ToolBar。
• bottomNavigationBar：顯示在畫面底部的導航欄。
• bottomSheet：這是一個畫面底部彈出的頁面，透過ScaffoldState.showBottomSheet控制。
• drawer：側邊欄的元件。
• snackBar：一個暫時性的訊息通知，顯示在畫面下方，透過ScaffoldState.showSnackBar控制。
• scaffoldState：跟當前Widget相關的狀態。

7. 在98行可以看到，這裡字串的顯示適用稍早提到的樣板字面值(Template literals)傳入，因此當_counter有更新時，會同步轉為字串顯示。
   
8. 在104行，主按鈕floatingActionButton定義了一些屬性，包含onPressed這個事件發生時會去呼叫_incrementCounter()這個方法，進行計數器+1的動作。
   

總結

經過基礎的Dart介紹以及瀏覽過一遍範例程式，應該多少對Dart的寫法有點概念。
接下來我會從Flutter相關的UI Widget著手，試著以實際例子去介紹演練。