Flutter學習必知必會！怎樣才能不踩坑地使用Flutter ？

序言

Flutter出來已經有些日子了，越來越多的開發者也開始嘗試使用  Flutter 進行開發， Flutter 是谷歌的移動 UI框架，基於  Dart 語言，支援多端開發（ Android、 iOS、 Web），聽到這裡是不是想要躍躍欲試了，由於小編也正在踩坑的路上，所以有寫的不對的地方還請多多指教。

官網

任何一門語言，官網都是最好的學習渠道，雖然說大多數都是英文的，但現在谷歌已經有很多都支援中文版本了：

Flutter中文官網：

安裝

安裝直接按照官網的來就行了，最主要的就是配置一下環境變數，下載下來的  flutter 包你可以理解為  java 中的  jar 包，開發的時候需要匯入的。

特性

1、widget（相當於Android中的View）

我們都知道，在  Android 中頁面是由很多個 View來構成的，在  Flutter 中， Widget 用來構成頁面上的內容，但是和  View 不同的是， Widget 是不可變的，有些人可能就有疑問了，不可變那豈不是靜態頁面，非也非也，那肯定有其他辦法的咯，接著往下看：

1.1、不可變狀態的小部件StatelessWidget

你可以將  StatelessWidget 理解成  Android 中的  ViewGroup，這是一個無狀態的小部件，什麼意思呢，就是當你的頁面部分不依賴於物件配置資訊外的其他任何內容時，簡而言之就是你的頁面是靜態頁面時，就可以使用它。

1.2、可變狀態的小部件StatefulWidget

和  StatelessWidget 一樣可以理解為  ViewGroup，但是它是有狀態的，這個狀態類似於  Activity 的生命週期，當你的頁面需要動態的改變時，你就需要使用它。

注意

如果一個  Widget 發生了變化（使用者與之互動），那麼它就是有狀態的；如果一個子  Widget是有狀態的，那麼包裹它的父  Widget 可以是有狀態的也可以是無狀態的，簡而言之， StatelessWidget 中可以包含  StatefulWidget，而  StatefulWidget 中也可以包含  StatelessWidget。

2、Android中的四大元件還有與之對應的嗎

除了頁面之外，其他的肯定都沒有，因為畢竟是跨端開發的框架，不是專門為  Android 而設計的，可能有些人要問了，那如果想實現  Android 中的一些特殊的功能豈不是做不了了，非也非也，這個就屬於另外一個知識了，賣個關子先，接著往下看； Activity 和  Fragment 在  Flutter 中都變成了  Widget。

3、資原始檔

3.1、資源圖片

在 Android中資源圖片有很多種解析度， Flutter 遵循像 iOS這樣簡單的 3種解析度格式:  1x,  2x,  3x，在根目錄下建立一個  images 的資料夾，然後再在  images 資料夾中建立三個資料夾用來存放不同解析度的圖片：

../icon.png

../2.0x/icon.png

../3.0x/icon.png

然後，你需要在  pubspec.yaml 中配置這些圖片，這個檔案相當於 Android中的  gradle檔案。

3.2、字串

在  Flutter 中，目前最好的做法就是新建一個類，用來宣告你所需要的字串

  宣告：  class Strings{    static String welcomeMessage = "Welcome To Flutter";
  }
  使用：  new Text(Strings.welcomeMessage);

4、生命週期

在  Flutter中， StatelessWidget是沒有生命週期的，只有  StatefulWidget 才有，我們一般透過掛接到 WidgetsBinding觀察並監聽 didChangeAppLifecycleState更改事件來監聽生命週期事件，有以下這些生命週期：

resumed - 應用程式可見並響應使用者輸入。這是來自 Android的 onResume

inactive - 應用程式處於非活動狀態，並且未接收使用者輸入。此事件在 Android上未使用，僅適用於 iOS

paused - 應用程式當前對使用者不可見，不響應使用者輸入，並在後臺執行。這是來自 Android的 onPause

suspending - 該應用程式將暫時中止。這在 iOS上未使用

5、非同步UI

Dart是單執行緒執行模型，支援 Isolates（在另一個執行緒上執行 Dart程式碼的方式）、事件迴圈和非同步程式設計。 除非您啟動一個 Isolate，否則您的 Dart程式碼將在主 UI執行緒中執行，並由事件迴圈驅動。

當你進行網路請求時，可以在 UI執行緒直接執行網路請求程式碼：

  loadData() async {    String dataURL = "
    http.Response response = await http.get(dataURL);
    setState(() {
      widgets = JSON.decode(response.body);
    });
  }

這裡使用了  async/await 語法來呼叫 API，你可以理解為，使用  async 之後這個方法就變成了非同步的方法，然後需要等待 （await）網路請求完成之後再執行下面更新語句；在  StatefulWidget 中，我們使用  setState 方法來更新 UI操作，這會重新執行  build 方法。

6、元件

在  Flutter 中，有很多元件，他們可以構建成頁面，因為元件繁多，所以這裡我就不一一介紹了，我會在接下來的部落格中為大家一一介紹  Flutter中各種元件的使用方法，也歡迎大家持續關注後續部落格。

當然還有一些已經上傳到了GitHub： ，以後也會慢慢更新