Mac筆記本配置Flutter開發環境

在開發Flutter的過程中,由於我們需要開發蘋果APP,所以,我們就需要配置一下蘋果的Flutter環境,接下來,就一步步的給大家展示 Mac本如何配置Flutter

一、準備工作

  1. 升級MacOS到最新的系統(建議是最新的系統)
  2. 安裝最新的Xcode
  3. 電腦上面安裝brew https://brew.sh/

二、下載 Flutter、配置 Flutter 環境變量、配 置 Flutter 鏡像

  1. 下載Flutter SDK
    https://flutter.dev/docs/development/tools/sdk/releases?tab=macos
  2. 把下載好的 Flutter SDK 隨便減壓到你想安裝 Sdk 的目錄如 /Users/admin/Downloads/flutter
  3. 解壓好後,打開終端(Command+空格 搜索終端),輸入下面這行命令
 vim ~/.bash_profile

輸入後,就進入下面這個情況

在這裏插入圖片描述
默認是無法編輯的,需要按下你的i鍵進入可編輯狀態,將下面這些複製進去,這裏需要注意一下:第一行的 PATH= 這個路徑是你自己的FlutterSDK路徑,不要用我的這個

export PATH=/Users/admin/Downloads/flutter/bin:$PATH
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
如何查看您的FlutterSDK路徑?

方法一:
新建一個終端窗口,將你的SDK拉入進新窗口中,就會顯示他的路徑了
在這裏插入圖片描述
點擊訪答,找到你的Flutter路徑
在這裏插入圖片描述
直接將你的Flutter文件夾拉入到終端當中,就會展示文件夾的路徑了

方法二:
找到Flutter文件夾,右鍵有一個顯示簡介
在這裏插入圖片描述

  1. 配置好後,按下Esc,輸入命令::wq 保存並退出Flutter,這時候,你的環境就配置完畢了, 您可以再次輸入我們上面的哪個vim命令進入查看一下,如果有的話,那就沒問題了,接下來,就是輸入下面這行命令,讓您的環境配置生效了
 source ~/.bash_profile

輸入這個命令之後,如果命令行出現下面這個,恭喜您,您的Flutter SDK環境已經配置完畢了
在這裏插入圖片描述

注意如果配置完成後輸入 flutter -h 告訴你 flutter 不是內置命令之類的錯誤的話,可能 sdk 沒有配置成功,也可能 sdk 下載的時候沒有下載全

三、運行 flutter doctor 命令檢測環境

首次運行會出現以下錯誤,不要慌,我們來解決掉它在這裏插入圖片描述
在修改這些錯誤之前,要先安裝個brew,這個相當於我們Windows中的npm,專門用來安裝包的
地址:https://brew.sh

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

由於每個人的報錯情況是不同的,因爲我的Mac本之前配置過brew,有一些環境是已經安裝好了的,所以我只需要執行一個命令就行,但是如果讀者您的錯誤 和我上面截圖的錯誤不同,比較多的話,就利用brew運行 終端給出的解決辦法,也就是To install下面的那些,就是需要我們運行的命令行如果有不懂如何解決的,可留言@我

運行完這些命令後,我們再一次運行flutter doctor檢測,可以看到,我們的Mac環境已經搭建完畢了
在這裏插入圖片描述
上面的那個紅X是因爲我們沒有配置Android模擬器的問題,並不影響我們使用,如果需要配置的話,可以參考配置Windwos的環境或者看我的另外一篇文章:利用VScode搭建Flutter環境開發

四、命令行工具生成 Flutter 項目

sudo flutter create flutterdemo
  1. 首先我們要創建自己的項目文件夾,比如我就在桌面創建了後,利用命令cd 進入到我們的項目路徑
    在這裏插入圖片描述進入來後,我們就可以利用創建項目的命令創建項目了
    在這裏插入圖片描述
    輸入創建命令後,需要輸入您的電腦密碼,回車後,就能夠創建成功您的第一個Flutter項目了
    在這裏插入圖片描述
    Flutter已經提示我們可以運行該項目拉~~~~

五、修改 Flutter Sdk 目錄的權限以及項目的 權限

保險起見,我們需要給我們的Flutter項目和SDK加上可以修改的權限或者 最高權限
在這裏插入圖片描述

sudo chmod -R 777 * 

代表遞歸給當前文件夾下的所有文件添加最高權限

六、Xcode 打開 flutter 項目 模擬器運行項 目

首先打開項目,進入到IOS當中
在這裏插入圖片描述
雙擊,Xcode就可以打開Flutter項目了
在這裏插入圖片描述

在這裏插入圖片描述
點擊運行後,首次運行可能會花費時間比較長,所以需要等待一下。
還有的問題就是已經安裝上了demo,但是一直打不開,我們稱爲假卡死狀態,這個時候,您只需要將demo刪除掉,從新再一次的運行就可以解決了。
成功運行
在這裏插入圖片描述

七、在 Vscode 中配置 開發 Flutter 項目

首先去Vscode官網,下載最新版的Vscode(AppStore搜不到)

下載好後,安裝Flutter插件以及Dart插件,一般安裝了Flutter後,Dart都會隨帶安裝上
在這裏插入圖片描述
接着就是導入您的Flutter項目,就可以直接Flutter run運行起來您的項目了

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