1.1　認識Flutter

隨著移動端開發的持續火熱，越來越多的公司、組織和個人開發者開始尋求移動端跨平臺開發的解決方案。傳統上，一款完整的移動端應用要維護Android和iOS兩套不同平臺的代碼，需要的開發資源更多，開發難度更大，周期也更長。跨平臺的框架可以很好地解決這一痛點。目前較流行的移動端跨平臺框架有FaceBook公司開發的React Native框架、阿里巴巴公司開發的Weex框架以及Google公司開發的Flutter框架。這些解決方案各有優劣，設計上采用的都是比較現代化的響應式開發思路。其中，Flutter在不同平臺上的體驗效果更佳，并且入門和上手更加容易。

1.1.1　Flutter的前世今生與應用場景

提到React Native，可能很多前端開發者都有所耳聞，但是要說Flutter，知道的人可能就不多了。在2018年2月的移動大會上，Google公司發布了Flutter的第一個測試版本，其實Flutter的前身是一個名為sky_sdk的移動端開發框架，Flutter中提供了大量的UI組件，例如文本標簽、按鈕、列表以及流暢的動畫效果，其中，組件的編程風格借鑒了React框架，采用較現代化的響應式開發思路。目前，Flutter依然保持著高速的版本迭代。

關于移動端開發，首先想到的就是iOS開發與Android開發。由于平臺與運行設備的差異性，很多時候，公司的移動端項目都要維護兩套完全不同的代碼，成本很高。相比之下，Flutter是一種新的解決方案，致力于提升用戶的UI體驗，其目標是可以按照120FPS的幀率進行界面渲染，比如今絕大多數移動設備上的60FPS幀率要高一倍。從語言上，Flutter采用Dart開發語言，Dart是類似JavaScript的一種Web腳本語言，也是一種非常現代化的編程語言，并且有著先天的跨平臺特性。對于界面炫酷、交互性強但原生邏輯簡單的應用，Flutter有著不可比擬的優勢。

1.1.2　安裝Flutter開發框架

Flutter可以跨平臺地運行在macOS、Windows或Linux系統上，但是由于iOS程序開發的局限性，本書所有的程序在macOS系統上進行測試。Flutter的安裝非常簡單，首先可以從以下網址下載Flutter的最新安裝包：

    https://flutter.io/docs/development/tools/sdk/archive?tab=macos#macos

如圖1-1所示，選擇平臺為macOS，之后單擊具體的Flutter版本進行下載，本書使用的是Flutter v1.0.0版本，建議你在學習時也使用這個版本。

圖1-1　下載Flutter安裝包

下載完成后，將其解壓到任意目錄即可。需要注意，解壓完成后，我們已經可以在當前Flutter目錄的bin目錄下執行相關的Flutter命令，但是這樣十分不便，我們需要可以在系統的任意目錄下執行Flutter命令。為達到此目的，在解壓Flutter安裝包后，需要進行系統環境變量的配置。

首先在終端執行如下命令，打開環境文件：

    vim $HOME/.bash_profile

執行上面的命令可能需要驗證用戶密碼，輸入計算機的啟動密碼即可（在輸入密碼時，終端可能沒有反應，不過放心，這是正常的）。vim是終端上的一個文本編輯器工具，打開文件后，輸入i進入編輯模式，在文件的末尾追加如下環境變量：

    export PUB_HOSTED_URL=https://pub.flutter-io.cn
    export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
    export PATH=/usr/local/flutter/bin:$PATH

上面的前兩個環境變量是為了方便國內用戶對Flutter資源的訪問，最后一個環境變量是Flutter的安裝位置。需要注意，/usr/local/flutter是筆者計算機中Flutter的安裝位置，你需要根據實際情況來配置這個變量，建議最好不要將Flutter安裝在/usr/local/bin目錄下，新版的Mac系統會自動保護這個文件夾。之后使用快捷鍵進入vim工具的命令模式，輸入wq，按回車鍵，即可進行文件的保存，完成后在終端輸入如下命令來刷新環境變量：

    source $HOME/.bash_profile

完成環境變量的配置后，就可以在任意目錄下執行Flutter命令了。例如，輸入如下命令可以查看幫助文檔：

    flutter help

如果終端輸出了類似如下的信息，就表示你的Flutter開發工具已經安裝成功：

現在，你已經可以在終端使用命令進行Flutter應用的創建、運行、打包等操作了，但是先不要著急，還需要進行其他工具的安裝和配置。