Flutter macOS環境配置

其實通讀一下文檔後的感覺就是還蠻複雜的,起碼比windows下配置要複雜一下,可能也是我平時windows用的比較多吧,今天這篇文章就以最簡單直接的方式引導在macOS上配置Flutter開發環境


準備

  • 操作系統: macOS (64-bit)
  • 磁盤空間: 700 MB (不包括Xcode或Android Studio的磁盤空間)
  • 工具: Flutter 依賴下面這些命令行工具
    • bash, mkdir, rm, git, curl, unzip, which

下載SDK

  • 先配置一下鏡像

由於在國內訪問Flutter有時可能會受到限制,Flutter官方爲中國開發者搭建了臨時鏡像,大家可以將如下環境變量加入到用戶環境變量中:

export PUB_HOSTED_URL=https://pub.flutter-io.cn //國內用戶需要設置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //國內用戶需要設置
  • 下載sdk

下載地址:https://flutter.dev/docs/development/tools/sdk/releases?tab=macos#macos

在這裏插入圖片描述
選擇最新的正式版本就行。

  • 設置sdk路徑

我在user目錄下新建了一個FlutterSDK文件夾來存放:
在這裏插入圖片描述

  • 解壓sdk

執行命令:

cd ~/development
unzip ~/Downloads/flutter_macos_v0.5.1-beta.zip

就是進入存放sdk的目錄,然後解壓。

比如我的就是:
在這裏插入圖片描述
解壓之後,剛纔設置的路徑下就會多一個flutter的文件夾:
在這裏插入圖片描述

  • 添加flutter相關工具path

export PATH=`pwd`/flutter/bin:$PATH

此代碼只能暫時針對當前命令行窗口設置PATH環境變量,要想永久將Flutter添加到PATH中請參考下面更新環境變量部分。

這一步是爲了可以使用flutter中的工具,比如檢測環境配置等。


開始配置

  • 運行 flutter doctor 檢測本機當前環境

flutter doctor

在這裏插入圖片描述
第一次執行可能會有點慢,後面就會快很多的。
在這裏插入圖片描述
執行完會看到一堆報錯,別慌,都好解決的。

直接從下面的Android Studio開始看,提示flutter插件dart插件沒安裝,還有就是沒有設備可以連接,先一步一步來。


  • 裝插件

打開Android Studio,安裝flutter插件,也會提示安裝dart插件,裝就完事了,然後會提示重啓。
在這裏插入圖片描述
在這裏插入圖片描述
安裝完並重啓之後,再次執行flutter doctor來看看現在是什麼效果。
在這裏插入圖片描述
可以看到Android Studio 這一項已經沒有報錯了。

關於沒有設備可以連接,完全不用擔心,啓個模擬器就行了。


  • 新建項目

這個時候已經可以新建項目了:
在這裏插入圖片描述
可以看到新建項目的時候已經多了一個new flutter project的選項了。
在這裏插入圖片描述

注意:項目名稱是小寫加下劃線的,然後選擇你的sdk地址即可。


  • 運行項目

新建項目之後會有一個默認的小demo模板,可以直接運行。

先選擇一個模擬器,點擊運行不會幫你自動啓一個模擬器,要自己先手動啓一個。
在這裏插入圖片描述
然後運行看看效果。

第一次運行初始化會有點慢,但是後面就快了,而且還有熱重,如果不是特別大的項目,基本上不到1s就能看到效果了。

在這裏插入圖片描述
可以看到一個默認的項目 。


然後我們來改一下title 和 加一個 hello flutter。

這一步主要是體驗一下熱重載

代碼就不貼了,改好直接按command+s就行。
在這裏插入圖片描述
可以看到是相當的快,不到1s,可以說是非常提升效率了。

看效果:
在這裏插入圖片描述
可以看到標題改了,而且中間也多了一行紅色的hello flutter。


更新環境變量

上面基本上都沒有什麼難度,但是到這裏可能就會遇到坑了,比如我就遇到了。。

爲什麼會有這一步呢,是因爲上面我們執行export PATH=pwd/flutter/bin:$PATH的時候,只是暫時把flutter相關工具加入到path中,這一步呢,就是永久的加入到path,以便可以運行flutter命令在任何終端會話中。

官方的3步驟:

  • 確定您Flutter SDK的目錄,您將在步驟3中用到。
  • 打開(或創建) $HOME/.bash_profile. 文件路徑和文件名可能在您的機器上不同.
  • 添加以下行並更改[PATH_TO_FLUTTER_GIT_DIRECTORY]爲克隆Flutter的git repo的路徑:
export PUB_HOSTED_URL=https://pub.flutter-io.cn //國內用戶需要設置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //國內用戶需要設置
export PATH=PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH

第一步sdk路徑是我們自己知道的,ok直接執行第二步:

$HOME/.bash_profile

ok,爬坑之路開始了,別慌,直接帶你跳坑。

你可能會遇到:

Permission denied

在這裏插入圖片描述

沒有權限,然後搜解決辦法,參考https://blog.csdn.net/qq_16525279/article/details/80245350
按照操作執行,但是又提示 sudo: chmode: command not found, 一直找不到原因。


注意了,我們其實可以直接打開.bash_profile文件的(一般在Mac的當前用戶目錄下):

open .bash_profile

沒有的話就創建:

touch .bash_profile

然後再打開。


打開是這樣的:
在這裏插入圖片描述

然後編輯,把鏡像和flutter加進去:

export PUB_HOSTED_URL=https://pub.flutter-io.cn //國內用戶需要設置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //國內用戶需要設置
export PATH=PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH

PATH_TO_FLUTTER_GIT_DIRECTORY就是你flutter存放的路徑。

比如我的就是這樣的:
在這裏插入圖片描述保存。

然後執行刷新:

source $HOME/.bash_profile

然後來驗證一下是否成功,輸出path:

echo $PATH

在這裏插入圖片描述
可以看到第一個就是新增的flutter路徑,到此更新環境變量就完成了。


ios配置:

上面是基於Android Studio進行配置的,現在看一下ios的配置。

我們重新執行以下 flutter doctor 看一下:
在這裏插入圖片描述
這時候可以看到只剩下xcode和ios的報錯了。

配置也可以,按照提示 安裝cocoapods、libimobiledevice、ideviceinstaller等等就行。


實際上開發環境只有一個就行了,主要是xcode不識別dart文件,as中有flutter和dart插件,畢竟都是google的親兒子,所以相對來說是最佳開發環境,但是還是可以運行到ios模擬器上看效果的。


  • 打開xcode

終端執行:

$ open -a Simulator 

打開一個ios模擬器。

然後as也能識別到並運行到ios模擬器中:
在這裏插入圖片描述
然後運行到ios模擬器上看看效果:
在這裏插入圖片描述
ok,到此就全部配置結束了,可能篇幅較長,但是圖文的形式更容易理解些。


寫作不易,點個贊支持一下唄 ^ _ ^


Windows下配置Flutter開發環境

https://blog.csdn.net/yechaoa/article/details/89150852


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章