親歷一次vscode搭建flutter開發環境

NO IMAGE

寫在前面
目前市面上有很多APP開發工具、框架。原生、ionic、weex、react-native、mui…都有親歷的專案,各有各的辛酸。前幾天偶然聽說flutter,據說是個曙光。一貫的原則,管他三七二十一,hello world跑起來再說。這篇文章記錄了整個環境的大家過程。同時我新建了一個群,方便討論。點此加入,或者:521354188

準備工作

以windows為例,:
1、安裝vscode(相信大家都安裝了)
2、android sdk(我是android studio開發過所以帶著)
3、安裝java(配環境變數)
4、git(沒有也行,相信大家都安裝了)

Clone the repo

先把flutter clone下來

git clone -b beta https://github.com/flutter/flutter.git

執行clone直接成功的概率很低,失敗的情況下重新ctrl c,然後再次執行。如果還不成功直接去github上下載吧。效果一樣,這就是上面說的git可以不裝。如果 完成後找到目錄應該如下圖:

下載flutter後所看到的的目錄

完成後,直接在cmd裡執行flutter是沒戲的,因為沒配置系統環境變數,把你的“flutter目錄 bin”這個路徑加到系統的環境變數中。

自動初始化

cmd執行

flutter doctor

等待完成即可,同樣的問題也是不太容易成功,多試幾次就行。實在不行找我。 成功後可以看到如下介面:
flutter doctor 執行成功後看到的介面
開發語言是dart 下載dart 需要點時間的。實在不成功找我,反正我成功了的。
至此,基本完成了,現在就差vscode的配置了。

vscode配置
首先下載dart code外掛

圖片描述

如果報錯,在setting中加上

"java.home": "D:\\Program Files\\Java\\jdk1.8.0_161"

接下來就可以執行:

flutter create xxxx

建立你的第一個專案了。

補充說明

問題比較多的地方就是下載,你各種辦法想盡,還不如直接科學上網一下。 如果那個實在下載不下來,找我!我發給你!省事

第一大疑問

我才幾行程式碼,打包後居然有20M , 實在是匪夷所思….騷猴如果解決了,我再發帖!