Dart 語言基本教學筆記

過去在某堂課上，老師突發奇想（？）要讓每位同學交一份自己撰寫的手機 APP 當作期末專題的成品；也正是在那個時候，在某位朋友的推薦下，我嘗試學習著使用 Flutter 框架進行手機 APP 的開發。

不得不說，其實光看 Flutter 的官方指南就真的真的、已經很夠入門來開發一個簡單的小 APP 了。但是，隨著想要開發的功能不斷升級、變得越來越複雜，我對於用來開發的 Flutter 的 Dart 語言的不熟就暴露出來了：在需要完成很多在其他語言可以很快完成的程式邏輯中，我卻需要反覆查詢 Dart 的語法 —— 說穿了，其實我就是『對 Dart 這個程式語言不夠熟悉』。

當然，我並不會說不能直接學習如何使用 Flutter 進行開發。相信也有許多的前輩是這樣一路學習上來，還練就了一番好功夫的。

充其量，我只是想要簡單紀錄下 Dart 這個程式語言的一些基本特性與語法，試圖讓自己更了解如何去撰寫 Flutter。

---

Dart 介紹

Dart 是一種由 Google 所開發的程式語言，最早是用於瀏覽器的腳本語言，也是類似 JavaScript 的物件導向語言。（不過相對打對台的 JavaScript 以及系出同源的 Golang，Dart 的知名度明顯低上不少。）

近年來，由於 Flutter 開發套件的發展，我身邊也有著一些朋友開始學習 Dart，算是 Dart 發展至今相對順遂的時間點。

值得一提的是，Dart 的執行方式有兩種：

• 在原生的虛擬機器上執行
• 將 Dart 程式碼轉成 JavaScript

而在本文中紀錄的一些簡單的語法，若是想要測試，推薦使用 DartPad 這個線上工具直接執行。DartPad 的畫面如下：

左邊為編輯器，可以寫下想要測試的 Dart 程式碼；而在點擊下藍色的 RUN 按鈕後，執行結果會呈現在右方 Console 的區塊中。

---

如何撰寫 Dart 程式碼（基礎）

我將 Dart 的語法按照以下的幾個小單元紀錄：

• Hello World
• 註解
• 變數與資料型態
• 流程控制
• 函式 Function
• 類別 Class
• 匯入 Import

Hello World (& how to print)

學習一個新的程式語言，不能免俗地，我們先從 Hello World 開始。

void main() {
  print("Hello World!");
}

Output:

Hello World!

在 Dart 語言中，main() 是程式的進入點，從這裡開始執行程式；而若是要印出字串，則可以使用 print() 函式。

順帶一提，要寫成 'Hello World!' 或是 "Hello World!" 都是可以的。

註解（comment）

/*
void main() {
  print("Hello World!");
}
*/

void main() {
  // This is a one-line comment
  print("Hello World!");
}

Output:

Hello World

註解跟 C 很相像，有分成單行註解以及多行註解。

變數與資料型態

在開始建立變數前，我先紀錄 Dart 的基本資料型態：

Data Type 資料型態	Keyword 關鍵字	Description 描述
Number	num, int, double	數值型態，又分成整數及浮點數
Strings	String	字串（字元序列）
Booleans	bool	分成 true 跟 false
Lists	List	有序陣列物件
Maps	Map	Key-Value pairs

String name = "Clay"; // Strings
int age = 18;      // Numbers 
bool fat = false;   // Boolean
List hobbies = [    // Lists
  "eating",
  "playing",
  "coding",
];

void main() {
  print("name: ${name} (${name.runtimeType})");
  print("age: ${age} (${age.runtimeType})");
  print("fat: ${fat} (${fat.runtimeType})");
  print("hobbies: ${hobbies} (${hobbies.runtimeType})");
}

Output:

name: Clay (String)
age: 18 (int)
fat: false (bool)
hobbies: [eating, playing, coding] (JSArray<dynamic>)

而除了指定變數的資料型態外，也可以跟 JavaScript 一樣使用 var 來宣告變數，讓變數依照賦值決定資料型態。

我們可以將上方的程式碼改寫為：

var name = "Clay"; // Strings
var age = 18;      // Numbers 
var fat = false;   // Boolean
var hobbies = [    // Lists
  "eating",
  "playing",
  "coding",
];

void main() {
  print("name: ${name} (${name.runtimeType})");
  print("age: ${age} (${age.runtimeType})");
  print("fat: ${fat} (${fat.runtimeType})");
  print("hobbies: ${hobbies} (${hobbies.runtimeType})");
}

這種寫法不影響輸出結果。

流程控制

For 迴圈

首先，先來看 Dart 中的 for 迴圈該如何撰寫，跟 C 的寫法非常像。

void main() {
  for (int i=0; i<10; ++i) {
    print(i);
  }
}

Output:

0
1
2
3
4
5
6
7
8
9

while 迴圈

再來看個 while 迴圈的版本。

void main() {
  int i = 0;
  while (i < 10) {
    print(i);
    ++i;
  }
}

Output:

0
1
2
3
4
5
6
7
8
9

if else 條件判斷式 + continue, break 流程控制

簡單來說，跟其他的程式語言類似：

• if: 是第一個判斷條件
• else if: 是第 N （N >= 2）個判斷條件
• else: 是所有條件都不符合時，執行的區塊

另外，在迴圈的區塊中：

• continue: 跳過底下執行的部分，直接開始下次迴圈
• break: 跳出迴圈，不再執行迴圈中的程式碼

我們來看個例子，讓 i 從 0 計數到 50，在 20 以前都不印出、20 到 30 印出，然後在 31 時跳出迴圈。

void main() {
  int i = 0;
  while (i < 50) {
    ++i;
    if (i < 20) {
      continue;
    }
    else if (i == 31) {
      break;
    }
    
    print(i);
  }
}

Output:

20
21
22
23
24
25
26
27
28
29
30

函式 Function

int sum(int a, int b) {
  return a + b;
}


void main() {
  int a = 2;
  int b = 3;
  int c = sum(a, b);
  
  print(c);
}

Output:

5

類別 Class

物件與類別的介紹在這裡就先略過不表；我們直接來看個如何建造 Class 的例子。

class human {
  String name;
  int age;
  bool fat;
  
  // Init
  human(String name, int age, bool fat) {
    this.name = name;
    this.age = age;
    this.fat = fat;
  }
  
  // Method
  void info() {
    print("My name is ${this.name}");
    print("I am ${this.age} years old.");
    
    if (this.fat == true) {
      print("I am a little fat. =(");
    }
    else {
      print("I am not fat!");
    }
  }
}


void main() {
  // Init
  var clay = human("Clay", 18, false);
  var atlas = human("Atlas", 25, true);
  
  // Describe
  clay.info();
  atlas.info();
}

Output:

My name is Clay
I am 18 years old.
I am not fat!
My name is Atlas
I am 25 years old.
I am a little fat. =(

這是一個我很喜歡舉的例子，將『人物資訊』包裝成一個 Class 來作為範例。

匯入 Import

import "dart:math";               // Import Dart library
import "package:xxx/xxx.dart";    // Import Packages
import "PATH/TO/DART_FILE.dart";  // Import files

---

References

• https://dart.dev/tutorials
• https://www.tutorialspoint.com/dart_programming/dart_programming_quick_guide.htm
• https://www.vogella.com/tutorials/Dart/article.html

---

Read More

• 在 Android Studio 上配置 Flutter 開發環境
• 一小時的 Python 基本入門 —— Speed Run 教學