vs code 搭建flutter運行環境(mac)


之前開發過hybrid app,用的是webview渲染,由於webview的體驗會沒有原生的體驗好,所以對跨端原生開發燃起了學習的興趣,在react-native和flutter之間糾結,

看了網上的一些對比,雖然flutter比較新,用的又是新的dart語言, 但貌似在兼容性上要優於reactive-native, 閑魚團隊就用了flutter,於是就決定從flutter入手。

作為一名前端開發,在flutter支持的幾種編輯器中還是用vs code比較順手,於是打算用vs code來配置flutter開發環境

先跟着官網進行前幾步基礎安裝程序,前幾步官網上有的基礎配置,最好跟着官網來,博客會過時,官網會更新。。

1. 安裝flutter

 export PUB_HOSTED_URL=https://pub.flutter-io.cn
 export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
 git clone -b dev https://github.com/flutter/flutter.git

如果要更新環境變量

vim ~/.bash_profile 進入文件添加系統變量路徑

export PATH=PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH  //注意:PATH_TO_FLUTTER_GIT_DIRECTORY 為你flutter的路徑,比如“~/document/code”

運行 source $HOME/.bash_profile 刷新當前終端窗口.

查看環境變量是否在已經在PATH中:

echo $PATH

至於環境變量,需要添加flutter路徑以及jdk和andriod sdk路徑 

注意:這些對應的具體路徑改成自己對應的目錄路徑

export PATH=/Users/username/flutter/bin:$PATH
export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_202.jdk/Contents/Home
export CLASSPATH=$JAVA_HOME/lib/tools.jar:$JAVA_HOME/lib/dt.jar
export PATH=$JAVA_HOME/bin:$PATH
export ANDROID_SDK_ROOT=/Users/username/software/android-sdk
export ANDROID_HOME=$ANDROID_SDK_ROOT
export PATH
=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
export PATH=$PATH:$ANDROID_HOME/build-tools/28.0.3

  

2. 安裝dart sdk

brew tap dart-lang/dart
brew install dart

如果沒有安裝Homebrew的,需要先安裝 https://brew.sh/

 

3. vs code 配置

vs安裝dart和flutter擴展

查看是否安裝成功

command+shift+p

Flutter: Run Flutter Doctor

新建項目demo

Flutter:New Project

如果新建項目出現了這樣的項目目錄,說明已經新建成功了,如果沒有,那需要檢查一下jdk、android-sdk,jdk的版本一定要是1.8的。

添加系統變量等操作,完成之后運行 Flutter:Launch emulater 就可以看到模擬器, 最后執行flutter run 就可以看到項目已經在模擬器里運行起來了。

至此,demo才算跑起來,然后按照提示改lib/main.dart文件的東西,按r鍵熱加載,就可以看到改動之后的效果了。

 

4. 一些坑

在vs插件安好了以及flutter sdk, dart sdk安裝完成之后,准備新建一個項目,新建項目之前先運行flutter doctor。。不行。。貌似在安裝什么插件。。等了好久,沒有成功。這個時候flutter create myapp顯然是沒有成功的。

於是才知道要安裝jdk, android sdk。。安完之后添加到系統變量。。嗯。然后新建項目,這次成功了,項目目錄出來了,然而准備跑起來的時候flutter run的時候報錯

Unable to locate a development device; please run 'flutter doctor' for information about
installing additional components.

額,好吧,那運行flutter doctor ...出現一堆錯誤

根據上面的報錯提示,更新了安卓sdk, 然后出現Android license status unknown報錯,

根據提示 update sdkmanager

還是報錯 Exception in thread “main” java.lang.UnsupportedClassVersionError ,這個錯誤是因為jdk版本不對,java --version 查看版本

jdk 版本要是1.8的,其他版本不行。。先開始安裝的是12,就一直報錯換成1.8之后,flutter doctor --android-licenses 然后就成功了 這個錯誤解決

最后是,項目的新建及目錄沒問題之后,在運行之前要有模擬器或是usb連接真機,模擬器的問題,在mac上安裝了xcode就會出現可運行的ios模擬器,運行就可以看到效果了

 

關於模擬器

ios模擬器的話是需要安裝xcode的,安裝完xcode運行flutter doctor如果提示版本低讓升級的話,能升級就升級吧,不能升級好像也沒關系,我的由於mac系統升級出了點問題,無法升級,所以xcode也無法升級,所以就用的還是九點幾的版本 ,但運行項目的時候,運行模擬器是會出現ios模擬器的

安卓虛擬機的安裝(其實不用安裝,虛擬機還慢,還不如真機use調試)過程的嘗試比較曲折 jdk,android-sdk等一系列環境都配置好之后,用vscode來直接創建的話也報錯,根據提示運行安裝sdkmanager "system-images;android-27;google_apis_playstore;x86"

也並不管用。。。再試還是提示這個

沒辦法,那只能另找方法新建一個安卓模擬器了

由於安卓的版本升級,網上的很多方法都是低版本的sdk用可視化工具來進行安裝的,android命令也被廢棄

現在用的命令是sdkmanager和avdmanager  利用sdkmanager來安裝可以的system-image

 運行avdmanager,出現以下提示 

 根據這個提示來新建安卓虛擬機

avdmanager [global options] create avd [action options]

example 

avdmanager create avd -n testAvd -k "system-images;android-25;google_apis;x86"
testAvd 是自己起的名字 -k后面是類型必填的

global options是上面的幾個命令  action options 下面對應的命令及其含義進行相應的配置

完成之后再在vscode里面 launch emulator 就能看到新建的安卓虛擬機選項了

 

如果沒有安裝emulator目錄,sdkmanager emulator安裝。

經過斷斷續續的折騰,終於在mac上安裝成功ios模擬器和安卓模擬器,win10下安裝成功安卓模擬器

最后,總結下,由於之前沒配置過Android sdk,所以在這個事上折騰的比較久,老版的Android sdk是可以用圖形界面來安裝操作,新版的都換成用sdkmanager命令來安裝sdk下的其他目錄如platform-tools目錄,emulator目錄等和avdmanager命令來create avd創建虛擬機,如果要創建安卓虛擬機,Android sdk下的system-iamges文件夾一定要有

再有就是在配置環境變量的過程中要注意,一不小心手抖打錯字就可能導致運行失敗,mac和win上的環境變量的配置方式包括路徑等也有些不同,也是需要注意下的。

當然,除了在虛擬機上運行調試,其實也可以不安裝虛擬機,直接用usb連真機調試更好。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM