一個web前端開發者學習Flutter 的歷程(一)

咚嘚隆咚鏘發表於2020-06-18

開啟Flutter中文網,並選擇你自己的系統。(筆者這裡用的是mac,所以會按照mac來一步一步往下走)

flutter.cn/docs

這個時候問題來了,因為本身的工作內容原因,其實我並不怎麼接觸到環境變數這個東西,然而官網只說了一句

一個web前端開發者學習Flutter 的歷程(一)

What?這是個啥玩意。。。去哪裡修改。。。不多廢話,直接上具體做法:

開啟終端,並輸入:

cd ~

修改.bash_profile檔案,把這兩行復制進去,然後儲存就行了。(記住這個檔案的位置)

然後按照文件接著往下走,一直到執行flutter doctor,問題來了

一個web前端開發者學習Flutter 的歷程(一)

什麼鬼,自然又是百度一番,還是直接上解決辦法。

承接上文的那個伏筆,在根目錄下執行:source ~/.bash_profile

一個web前端開發者學習Flutter 的歷程(一)

再次執行flutter doctor

一個web前端開發者學習Flutter 的歷程(一)

反正這段話的意思就是說,你不能用下載的SDK你得用git 克隆下來的SDK。。。那為啥要讓我下載(家裡網還很奇怪,100M的網github下載東西還賊慢)。

開始了漫長的等待。。。可算是克隆完了

一個web前端開發者學習Flutter 的歷程(一)

PS:有一天筆者這邊突然出了點問題,需要重新裝flutter的時候發現怎麼都裝不上,不過還好找的一個倉庫gitee.com/mirrors/Flu…,感覺目前國內這個倉庫應該是最好的解決辦法了

然後重啟了終端,flutter doctor終於看見變化了。。。

一個web前端開發者學習Flutter 的歷程(一)

好像是那麼回事了。。。等著吧。。。看看執行完了是啥情況

一個web前端開發者學習Flutter 的歷程(一)

完蛋,啥也沒有。。。。裝吧

反正x-code或者android studio 至少裝一樣,看了一下官網的描述,我選x-code吧,因為我今天的目標是在模擬器上跑出來一個demo就行了。

順便說一下,其實筆者也走了一遍android studio的流程,但是等待期間,我發現好像x-code的更適合我本身的情況,所以放棄了那條路。如果想走這條路的同學,我提供一個網址:http://www.android-studio.org/(官網應該是被牆了,所以直接用這個中文社群,也是百度出來的)。

不過如果已經看到這個地方應該都是用mac的同學吧,所以還是建議同學們用x-code。

接下來就是等啊等,等啊等。。。。終於安裝好了,將近8個G。。。

在等待的過程中,我已經按照體驗中的這個步驟,使用vscode把demo程式碼準備好了。當然肯定也有其他的辦法,而且中文網上面也提供其他的辦法,如果喜歡的話,都可以嘗試一下

一個web前端開發者學習Flutter 的歷程(一)

接下來還是按照官網的,執行了一下

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
複製程式碼

接著,開啟已經下載好的x-code,反正就是同意協議和安裝元件

然後在命令列執行

open -a Simulator
複製程式碼

等一會,終於。。。

一個web前端開發者學習Flutter 的歷程(一)

終於啊,一下午了。。。。

然後在vscode裡面自帶的控制檯執行:

flutter run
複製程式碼

然後令人激動的事情發生了。。。。

一個web前端開發者學習Flutter 的歷程(一)

一個web前端開發者學習Flutter 的歷程(一)

第一天這樣的內容算是成功了吧。。。

明天再研究程式碼吧

相關文章