使用 flutter 開發 ios/android 應用

2018年2月27日，在2018世界移動大會上，Google發布了Flutter的第一個Beta版本。截止目前 (2018年8月19日)已經發布到0.5.1。今天我們簡單進行介紹一下 flutter 的安裝和使用。

Flutter 使用 Dart 語言進行開發， Dart 是谷歌開發的編程語言，官網地址是 dartlang.org。有 java 基礎的話，學習起來還是很快的，我自己大概用了一晚上的時間（一個通宵），基本可以使用 dart 來寫簡單的代碼，可以說上手難度較低。

Flutter 安裝

直接安裝 flutter 就可以了， 不用單獨安裝 dart 語言。安裝過程在 flutter 官網有詳細的介紹，我本來想寫下，但是看了下官網介紹，很詳細，感覺沒有必要了。我自己安裝了一下，沒有坑。

Hello World

這裡簡單介紹下 flutter 的應用，並運行一個 hello world 應用。

安裝完 flutter 以後， 就可以通過在命令行運行 flutter create project_name 來創建應用，應用名可以由數字， 英文和下劃線組成。我們來創建一個 hello world 應用。運行 flutter create flutter_hello_world 來創建應用。安裝過程會耗費一點時間，因為 flutter 會下載需要的包，這裡不太穩定，可能需要 fanqiang。

我是通過 vs code + flutter 插件來運行的， 首先啟動一個模擬器，我這裡是使用的 iphone 8 的模擬器，用 vs code 打開目錄，然後打開 lib/main.dart 文件，按 F5 來運行，這裡可能會要求你選擇模擬器，點一下就好了。下面是我的運行截圖。

然後我們來看下 flutter 的結構。

簡單說下， ios 和 android 文件夾裡面是一些 ios 或者 android 的設置，比如 app 顯示名稱， 需要的許可權等。這裡我也沒有太大深入，用到的時候了解一下就可能。lib 目錄是接下來我們主要的工作目錄，主要代碼都是在 lib 下面的 dart 文件中。下面還有一個 pubspec.yaml 文件，這個文件裡面包含的是使用到的包，圖片文件，字體文件等。

接下來是看代碼，我們看下 lib/main.dart 裡面的代碼。這裡我們要知道一點，flutter 中一切都是控制項，沒有主容器，整個應用就是一個根控制項。

main.dart 中首先是一個 main 函數，main 函數運行了一個 MyApp 類，MyApp 類繼承了 StatelessWidget 類(後面我會說下StatelessWidget 和 StatefulWidget 類)，這裡就是我們說的一切都是控制項。看代碼:

這裡創建了一個 MaterialApp 對象，參數有title， theme，home。theme這裡可以試著改下顏色。保存就可以實時看到運行結果。在這裡指定了home 為 MyHomePage 類的實例。

下面接著看 MyHomePage 類的代碼 (為了截圖方便，我已經刪除了多餘的空格和注釋，實際了 Flutter 代碼帶了大段的注釋)。

MyHomePage 繼承了 StatefulWidget 類，這裡簡單說下 StatelessWidget 類 和 StatefulWidget 類的區別，StatelessWidget 用來實現無狀態的控制項，即控制項裡面不需要改變內容，比如 flutter 中的 Text ，Icon類都繼承了 StatelessWidget 類，在類中通過重寫 build 方法來實現邏輯。StatefulWidget 用於可以改變的控制項，如 Image, Checkbox, Form都是繼承自 StatefulWidget，子類通過 重寫createState 方法指定一個 State 類來實現控制項的改變，然後在 State 中通過重寫 build 方法來實現邏輯，每次調用 setState 就會重新調用 build 方法 （這裡我打算以後專門寫一篇來介紹）。

其實說到這裡也就可以看懂 MyHomePage 類的代碼了。通過 _MyHomeState 裡面的 build 方法來定義控制項，然後通過按鈕的 onPressed 事件裡面的 setState 方法來改變點擊次數。

這裡我們試著來把應用改成只顯示 Hello world。其實超級簡單，在 _MyHomeState 改成如下這樣就可以了。

這裡我刪除了多餘的 計數器代碼和多餘的按鈕 floatingActionButton，你也可以試著稍作修改來查看效果。運行結果如下：

至此，我們的 hello world 項目就算完成了。因為我也是最近才接觸 flutter，寫這個也是為了來督促自己的學習，文章裡面難免有錯誤的部分，望見諒。好了，就到這裡，下次見。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！