(一) Mac 環境下 Flutter | Android Studio 的安裝

馬小撂發表於2021-07-20
MacFlutterAndroid
前言：最近想學習一下flutter 那麼就重配環境開始吧
複製程式碼

Flutter官網

一、更新HomeBrew

開啟終端輸入命令：

$ brew update
複製程式碼
二、下載Flutter的SDK

官網 -> Get Started -> Install -> MacOS -> Flutter SDK 在這裡插入圖片描述

解壓：我們可以直接拖拽雙擊 也可以使用命令

$ cd ~/development
$ unzip ~/Downloads/flutter_macos_2.2.3-stable.zip
複製程式碼

這裡有個小問題要注意下：我們選擇解壓的檔案是否有許可權 如果沒有許可權會提示Permission denied
解決方法：

$ sudo chmod -R 777 檔案路徑
複製程式碼
三、配置映象

官方有一句很溫馨提示 Important: If you’re in China, first read Using Flutter in China 配置Flutter的環境變數 如果電腦預設 bash，那麼配置 ~/.bash_profile 如果電腦預設zsh，那麼配置 ~/.zshrc 如果不確定可以先配置~/.bash_profile
1）開啟終端輸入

$ vim ~/.bash_profile
複製程式碼

如果出現了下圖，可能是我們開啟了兩次 在這裡插入圖片描述

[O]pen Read-Only：開啟此檔案成為只讀檔
(E)dit anyway：還是用正常的方式開啟你要編輯的那個檔案
(R)ecover：就是載入暫存檔的內容，用在你要救回之前未儲存的工作。
(D)elete it：你確定那個暫存檔是無用的！那麼開啟檔案前會先將這個暫存檔刪除！
(Q)uit：按下 q 就離開 vim ，不會進行任何動作回到命令提示字元
(A)bort：忽略這個編輯行為
我們按E 或者 D
2）我們可能進入bash_profile，如果當前狀態是不可編輯的，按I後出現INSERT，檔案進入可編輯狀態 如圖： 在這裡插入圖片描述

3）在檔案裡面新增

export PATH=你的flutter檔案路徑/bin:$PATH
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
複製程式碼

4）按esc鍵退出編輯模式 然後英文的:wq回車 這樣就儲存退出啦

5）在終端接著輸入

$ source ~/.bash_profile
複製程式碼

6）在終端接著輸入

$ flutter -h
複製程式碼

正確就會如下圖： 在這裡插入圖片描述

⚠️報錯1：沒有許可權 Exception: Flutter failed to create a directory at "/Users/maxiaoliao/.config/flutter". The flutter tool cannot access the file or directory. Please ensure that the SDK and/or project is installed in a location that has read/write permissions for the current user.

解決方法

在終端輸入

$ sudo chmod 777 .config
複製程式碼

⚠️報錯2：zsh: command not found: flutter 我們電腦預設的zsh 在這裡插入圖片描述
解決方法：

$ vim ~/.zshrc
複製程式碼

在zsh檔案新增source ~/.bash_profile儲存

四、檢測是否安裝成功
$ flutter doctor
複製程式碼

在這裡插入圖片描述

Flutter安裝成功

Android Studio安裝

官網

一、接受協議並下載

在這裡插入圖片描述

二、配置環境變數
# Android
export  ANDROID_HOME=~/Library/Android/sdk
export  PATH=${PATH}:${ANDROID_HOME}/emulator
export  PATH=${PATH}:${ANDROID_HOME}/tools
export  PATH=${PATH}:${ANDROID_HOME}/platform-tools
複製程式碼
三、安裝外掛

Android Studio -> preferences -> Plugins -> 搜尋 flutter -> Install -> Restart IDE 在這裡插入圖片描述

四、建立一個flutter專案

在這裡插入圖片描述 建立以後一般會預設帶一個模擬器

五、檢查flutter是否都配置成功
$ flutter doctor
複製程式碼

在這裡插入圖片描述解決： 1).先下載安卓命令列工具在這裡插入圖片描述 2）終端輸入

$ flutter doctor --android-licenses
複製程式碼

然後一路y

六、再次檢查flutter是否都配置成功
$ flutter doctor
複製程式碼

在這裡插入圖片描述 成功了

七、最後執行一下flutter工程

在這裡插入圖片描述

相關文章