Flutter 安裝和初體驗

在前面的文章中，我們初步了解了Flutter。本文將介紹Flutter的安裝過程和開發工具，為了大家能更好地理解Flutter，本文還找了一個小例子。

Flutter 安裝指南

關於Flutter的安裝，參考官方文檔中的步驟即可。本文以macOS為例，介紹Flutter在macOS上的安裝細節。

官方文檔地址：https://flutter.io/get-started/install/

首先，下載Flutter的源碼，按照官方建議，我們選擇beta分支，如下所示：

代碼下載後，目錄結構如下：

接著，為了方便後續使用，需要將項目根目錄下bin路徑加入環境變數PATH中，打開~/.bash_profile文件，修改環境變數即可，如下：

務必注意：如果你不能科學上網，那麼在繼續下面的步驟之前，需要做一些額外的事情。聲明PUB_HOSTED_URL和FLUTTER_STORAGE_BASE_URL兩個環境變數，在當前shell窗口執行如下兩行命令即可，此舉是為了讓Flutter在安裝過程中使用國內的鏡像。

export PUB_HOSTED_URL=https://pub.flutter-io.cn

export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

然後，我們就可以通過命令來執行Flutter的安裝程序了，經過一段時間的下載和安裝，Flutter會輸出安裝結果：

從上面的診斷信息可以看出如下關鍵信息：

Flutter的版本和渠道

Flutter運行所需的Android工具鏈 OK

Flutter運行所需的iOS工具鏈 不OK

Android Studio和IntelliJ都安裝了，還有一個已連接的手機

如果大家想完善iOS工具鏈，那麼就按照?號的提示安裝相應工具即可。對於我來說，我本機的xcode版本太低，我需要升級xcode並安裝一堆工具，我就懶得操作了，大家根據需要來吧。

如何運行Flutter程序

運行Flutter程序有兩種方式。

第一種方式，這裡假設有個Flutter程序，它的目錄名為FlutterDemo，那麼我們只需要在FlutterDemo目錄下執行即可，當然必須通過USB連接設備才可以，這裡可以選擇iOS和Android手機，當然也可以選用模擬器。

第二種運行方式就是通過IDE來運行程序，比如AndroidStudio和IntelliJ的按鈕。

如何開發Flutter程序

Flutter可以使用如下三個IDE來開發程序

Android Studio

IntelliJ

Visual Studio Code

但是很奇怪，看來Google並沒有打算支持xcode，這或許對iOS用戶不太友好。

對於Android同學來說，肯定是選擇Android Studio或者IntelliJ來開發程序了。本文選擇IntelliJ做演示，其實Android Studio和IntelliJ很類似。

為了使用IntelliJ來開發和調試Flutter程序，首先需要安裝如下兩個插件：

Flutter插件：提供程序的運行、調試和熱重載等功能

Dart：提供Dart語言的支持

安裝方式為：選擇Preferences中的Plugins選項，然後搜索Flutter安裝即可，安裝Flutter插件會自動安裝Dart插件，如下：

安裝完成後，重啟IntelliJ，就可以通過IntelliJ來新建和開發程序了。

例子展示

為了讓大家更加直觀地了解Flutter的運行效果，本文找了一個官方demo並在IntelliJ中打開並運行，這個例子的路徑位於flutter/examples/flutter_gallery目錄下，使用IntelliJ打開後如下所示：

可以看到，在連接設備那欄有三個選項，分別是Android手機、iOS模擬器和Android模擬器，這意味著：同一套代碼，可以在不同的設備中運行。

在Android手機中的運行效果如下：

GIF

長按識別下方的二維碼關注我，接收更多技術推送

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