學(xué)習(xí)筆記:FLUTTER+VSCODE環(huán)境搭建

最近開(kāi)始學(xué)習(xí)APP開(kāi)發(fā),大學(xué)期間寫過(guò)一點(diǎn)點(diǎn)東西,但是算不上什么程序。畢業(yè)后編程之類的東西也忘得差不多了,希望后續(xù)學(xué)習(xí)順利。
以下均為初學(xué)者個(gè)人筆記
整個(gè)過(guò)程大概裝了以下東西:
1、ANDROID STUDIO(IDE,開(kāi)發(fā)工具,但是非常吃資源,于是后來(lái)?yè)Q成使用VSCODE)
2、ANDROID SDK
3、JDK
4、FLUTTER插件
5、DART插件
6、GITHUB

直接開(kāi)始:
1、安裝JDK(JAVA環(huán)境,個(gè)人理解是系統(tǒng)運(yùn)行JAVA語(yǔ)言需要的東西吧)
參考:http://www.runoob.com/w3cnote/android-tutorial-development-environment-build.html
到官網(wǎng)下載JDK:https://www.oracle.com/technetwork/java/javase/downloads/index-jsp-138363.html
下載的是

QQ截圖20190106154611.png

安裝后參考上面的網(wǎng)址進(jìn)行環(huán)境變量配置。
最后通過(guò)cmd輸入javac確認(rèn)配置是否成功。

2、安裝AS
發(fā)現(xiàn)目前的AS都是只有IDE,并非自帶SDK的,我是在這里下載的:
https://dl.google.com/dl/android/studio/install/2.3.3.0/android-studio-bundle-162.4069837-windows.exe
(自帶SDK)
安裝好后,打開(kāi)AS基本就可以直接開(kāi)始開(kāi)發(fā)了。
但是電腦跑不動(dòng),啟動(dòng)模擬器要20分鐘,所以改用VSCODE開(kāi)發(fā),見(jiàn)下面。

3、安裝VSCODE
這個(gè)不介紹了

4、安裝GITHUB
由于在找FLUTTER時(shí),大多推薦通過(guò)GITHUB下載,所以也搞下GITHUB,這個(gè)東西據(jù)說(shuō)是編程必備?
整個(gè)過(guò)程參考:https://blog.csdn.net/Hanani_Jia/article/details/77950594
里面已經(jīng)非常詳細(xì),但是在文中獲取密鑰時(shí),原文是
ssh-keygen-t rsa-C "your_email@youremail.com” 發(fā)現(xiàn)不行,看了下面評(píng)論才知道現(xiàn)在應(yīng)改為: ssh-keygen.exe -t rsa -C "你的郵箱地址"
其他的都沒(méi)問(wèn)題,照做即可。

5、安裝FLUTTER
參考:http://m.itdecent.cn/p/7cbf82b4854e
過(guò)程中沒(méi)出現(xiàn)問(wèn)題,到執(zhí)行FLUTTER DOCTOR為止,照做即可。

6、VSCODE上安裝插件


QQ截圖20190106160454.png

打開(kāi)VSCODE,在圖中的為止找到FLUTTER和DART插件進(jìn)行安裝。
然后在VSCODE中通過(guò)“查看-終端”調(diào)出終端命令輸入框,輸入flutter doctor進(jìn)行檢測(cè)。
遇到過(guò)一下問(wèn)題:
提示沒(méi)安裝安卓SDK(flutter doctot會(huì)進(jìn)行4項(xiàng)檢查,第二項(xiàng)是SDK檢測(cè))。
后來(lái)通過(guò)環(huán)境變量配置SDK修復(fù):
(1)新建一個(gè)系統(tǒng)環(huán)境變量,變量名為ANDROID_SDK_HOME,變量值為你的SDK安裝路徑
(2)把%ANDROID_SDK_HOME%\platform-tools;%ANDROID_SDK_HOME%\tools添加到Path環(huán)境變量(下面那個(gè)框,系統(tǒng)變量中的PATH)中。
最后在CMD中輸入adb檢查是否配置正確。

7、最后連接上手機(jī)
需要打開(kāi)開(kāi)發(fā)者模式和USB調(diào)試,再FLUTTER DOCTOR一遍,4項(xiàng)正常即可:


QQ截圖20190106161519.png

8、新建項(xiàng)目
shift+ctrl+p調(diào)出命令框,通過(guò)flutter:new project新建項(xiàng)目。
最后直接在終端命令中輸入flutter run即可在手機(jī)中查看APP效果。
其中的問(wèn)題,我在run之后,卡在Initializing gradle 很久很久,解決方案如下(不知道哪個(gè)是要因,反正我每一步都做了):
一、參考:https://blog.csdn.net/qq_16071655/article/details/84106853
改了下鏡像,但是效果不是很好。
二、然后后來(lái)又配置了下gradle的環(huán)境變量(不知道是不是沒(méi)配好導(dǎo)致)
gradle在安卓studio中自帶了,找出其中的目錄進(jìn)行配置即可:
(1)新增系統(tǒng)變量GRADLE_HOME,變量值:D:\Program Files\Android\Android Studio\gradle\gradle-3.2
(2)系統(tǒng)變量中的path變量值中增加;%GRADLE_HOME%\bin
最后在CMD中輸入gradle -v測(cè)試。
三、在項(xiàng)目的gradle\wrapper\gradle-wrapper.properties中,把distributionUrl的值改為:
https://services.gradle.org/distributions/gradle-4.6-all.zip

QQ截圖20190106162624.png

搞定之后,重新flutter run,貌似由于VSCODE要下載新的gradle,結(jié)果等了好久,終于成功運(yùn)行APP。


Screenshot_20190106-162754.jpg

最后,如果不方便用手機(jī)調(diào)試程序,可以單獨(dú)啟動(dòng)安卓模擬器,首先在AS中創(chuàng)建一次模擬器后關(guān)掉。
然后參考:https://blog.csdn.net/Baykermr/article/details/83065574
中的 第四點(diǎn): 單獨(dú)啟動(dòng)Android Studio 模擬器(AVM),即可單獨(dú)啟動(dòng)。

整個(gè)過(guò)程缺乏對(duì)原因的挖掘和理解,算了,后面再在實(shí)踐中研究。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容