Flutter 即學即用系列博客——01 環境搭建

Flutter 即學即用系列博客——01 環境搭建

前言

工欲善其事,必先利其器

所以第一篇我們來說說 Flutter 環境的搭建。

筆者這邊使用的是 MAC 電腦,因此以 MAC 電腦的環境搭建為例。

Windows 或者 Linux 也是類似的操作。

Flutter 有英文版的官網和中文網,大家可以根據自己的喜好和情況進行選擇。

點擊下面的鏈接可以到對應的安裝頁面。

Flutter 官網安裝鏈接:https://flutter.io/docs/get-started/install

Flutter 中文網安裝鏈接:https://flutterchina.club/get-started/install/

我們這邊以官網為例進行說明。

目錄

Flutter 即學即用系列博客——01 環境搭建

1. 配置鏡像

點擊進入官網,可以看到下圖:

Flutter 即學即用系列博客——01 環境搭建

我們點擊 Using Flutter in China 進入:

Flutter 即學即用系列博客——01 環境搭建

可以看到主要是讓我們配置鏡像站點。

所以我們就將要求的兩個環境變量添加到系統就可以了。

打開 terminal,看下當前用戶下面是否有 bash_profile 文件,執行命令:

vi ~/.bash_profile

如果底部有

"~/.bash_profile" [New File]

說明之前沒有存在過這個文件。

不管之前是否存在過該文件,我們在末尾追加上面的兩個環境變量即可。

如果不熟悉 vi 操作,可以參考下面兩篇文章或者額外瞭解。

linux Vi操作和使用方法詳解

Linux vi/vim

將上面兩個環境變量添加到 bash_profile 文件,文件新增的兩行應該類似下面(鏡像地址可能有變動,以上面官網為主,筆者此刻就是下面的):

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

接著執行命令:

source ~/.bash_profile 
echo $PUB_HOSTED_URL

如果打印出了你輸入的鏡像,說明沒有問題,設置成功了。

主要目的是追加兩個環境變量,如果你習慣用文件打開,也可以打開文件後直接追加

回到安裝頁面,點擊 macOS。

2. 獲取 Flutter SDK

Flutter 即學即用系列博客——01 環境搭建

從圖中可以看到,當前的目標是獲取 Flutter SDK。

點擊藍色按鈕,下載 Flutter SDK。

下載完成之後解壓到自己想放置的目錄(建議路徑不要包含中文)。

這裡假設我們將壓縮包解壓到的路徑為 ~/flutter。

首先把下載下來的壓縮包移動到 ~/flutter。

我這邊下載的壓縮包為flutter_macos_v1.0.0-stable.zip,執行命令

unzip flutter_macos_v1.0.0-stable.zip

執行完成之後可以看到當前目錄多了一個 flutter 文件夾。

接下來就是要把 flutter 設置到環境變量以便在任何地方都可以執行 flutter 命令。

執行如下命令:

cd flutter/ 
pwd

控制窗口會打印 flutter 根目錄。我這邊為/Users/nesger/flutter/flutter。

跟上面設置兩個環境變量操作類似,首先打開文件~/.bash_profile。

添加下面語句:

export FLUTTER_ROOT=/Users/nesger/flutter/flutter
export PATH=$FLUTTER_ROOT/bin:$PATH

這裡定義了 flutter 根目錄並將其下面的 bin 目錄設置到 PATH 裡面。

保存退出後執行

source ~/.bash_profile

NOTE:執行該命令後你當前窗口和新開的窗口就都可以直接運行 flutter 命令了。但是之前開的窗口就不可以了。如果需要之前的窗口也可以,就需要在對應窗口執行上面的 source ~/.bash_profile 命令

3. 執行 flutter doctor 完善相關工具鏈

運行

flutter doctor

會打印 flutter 需要的工具鏈是否完善。(NOTE: 這個命令後面會多次用到)

Flutter 即學即用系列博客——01 環境搭建

可以看出一些端倪。

顯示一些警告。

按照上面提示進行處理即可。

舉個例子:

✗ Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses

這邊說 Android licenses 沒有 accepted,執行

flutter doctor --android-licenses

然後不斷點擊 y 表示同意就可以了。

我們運行之後,再使用

flutter doctor

可以看到已經修復了

Flutter 即學即用系列博客——01 環境搭建

接下來就是 iOS toolchain 以及 Android Studio 兩個插件的安裝。

對於 Android 開發來說,其實 iOS toolchain 不修復也沒問題。

我們先修復 flutter 插件安裝。

NOTE:Android Studio 版本需要 3.0 或者更高版本,不然會有坑,這邊為了演示一下坑及遇到的解決方法。所以這邊先用版本 2.3.3 進行演示。讀者最好先升級版本到 3.0。步驟是一樣的。

Flutter 即學即用系列博客——01 環境搭建

第一步:Android Studio->Preferences

Flutter 即學即用系列博客——01 環境搭建

第二步:點擊左側 Plugins

Flutter 即學即用系列博客——01 環境搭建

第三步:輸入 flutter,點擊 Search in repositories

Flutter 即學即用系列博客——01 環境搭建

第四步:點擊 Install

Flutter 即學即用系列博客——01 環境搭建

第五步:dart 一起安裝

安裝完成之後重啟 Android Studio,然後在終端執行命令

flutter doctor
Flutter 即學即用系列博客——01 環境搭建

可以看到 Flutter 插件安裝好了,只不過這裡提示版本不夠新。

如果你的 Android Studio 版本為 3.0 或者更高,就不會報錯,那麼可以忽略下面的修復步驟。

修復步驟:

重啟 Android Studio 並沒有看到直接創建 Flutter 項目。

筆者這邊 Android Studio 版本為 2.3.3。

而 Flutter 需要 Android Studio 3.0 或者更高版本支持。

這邊更新 Android Studio 之後重啟。

可以看到執行 flutter doctor 命令之後 Android Studio 確實是 3.3 版本了。

Flutter 即學即用系列博客——01 環境搭建

但是 Flutter 依然不是最新的,需要到 plugins 去更新。

此外,還需要更新 dart。

更新完之後就可以看到創建 Flutter 項目了。

Flutter 即學即用系列博客——01 環境搭建

到了這裡基本上對於 Android 開發的你來說環境搭建就完成了。

Flutter 即學即用系列博客——01 環境搭建

4. 擴展

可以看到上面有個 iOS toolchain,基於下面幾點,我想修復這個。

  1. 我的機器安裝了 Xcode。
  2. 剛接觸 Flutter,想多點嘗試,也想看看 Flutter 代碼在 iOS 運行效果。
  3. 聽說 iOS 開發都用模擬器,想體驗下 iOS 模擬器。
  4. Android 的模擬器大家都懂,反正我大部分是用真機調試。

所以按照上面的提示,Xcode 完全安裝以及運行相應命令。

但是遇到了一個坑,就是依然報錯。

所以我直接將提示的命令一步執行,結果可以了。

在 GitHub 上面還幫助到了一個 iOS 開發者。

flutter doctor 提示 iOS toolchain 有些錯誤:https://github.com/nesger/FlutterNote/issues/1

更多環境搭建問題和解決方案大家都可以提 issue 哦~

也許別人剛好就解決了你遇到的問題

Flutter Issue 集合:https://github.com/nesger/FlutterNote/issues


分享到:


相關文章: