原先一直都是在做iOS的原生開發，Android也是興趣平平，曾經也是很想學習下RN的，無奈web前端跟js的一些相關內容實在不熟悉，直到這次的flutter的出現 讓我重新有股學習的沖動。so，本文比較傾向于iOS的調試，所有的內容都是建立在對iOS原生開發比較熟悉的基礎上。

image

安裝flutter

官網flutter.io

當然跟著我做也一樣

安裝sdk

打開 Terminal先cd到你需要安裝的目錄下， 我這里直接在 ~ 個人目錄下

一次執行下面幾條命令

git clone -b beta https://github.com/flutter/flutter.gitexport PATH=`pwd`/flutter/bin:$PATHflutter doctor 

將flutter添加到環境變量中

vim ~/.brash_profile

//這個一定要添加export PATH=/Users/用戶名/xxxxxx/flutter/bin:$PATH

//這個是配置Android相關的 沒有Android studio 或者 只要測試iOS的話 這幾個可以先不管 export ANDROID_HOME="/Users/用戶名/Documents/android_sdk" //android sdk目錄，替換為你自己的即可 export PATH=${PATH}:${ANDROID_HOME}/tools export PATH=${PATH}:${ANDROID_HOME}/platform-tools 

執行source ~/.brash_profile

最后檢查下echo $PATH 看看 是否已經添加到環境變量中

image

flutter doctor 命令是用來檢查依賴環境

最后結果是這樣的

image

按照他的提示把缺少的內容安裝一下，我這里就主要安裝iOS相關的幾樣東西先

 brew install --HEAD libimobiledevicebrew install ideviceinstallerbrew install ios-deploy 

pod 大家應該都有裝

但是在安裝上面三個東西的時候brew居然給我報錯了

/usr/local/include is not writable.

這是什么鬼。。。查了很多方法
最后 解決方法 居然發現 /usr/local/ 目錄下居然沒有include這個目錄，手動添加一個include目錄解決！！！

link完成后再運行flutter doctor 看到iOS這塊沒問題就OK了（Android暫時不管了）

image

安裝VSCode

考慮到對Android studio 不是很熟悉，所以這次選擇了 vscode

直接在官網下載vscode

image

安裝flutter插件

打開vscode
按快捷鍵 cmd + shift + p或者 菜單欄選擇 view - command palette

輸入 install 選擇插件安裝

image

先安裝 flutter 的語言包 dart

image

接下來繼續安裝 flutter 插件

image

新建Flutter工程

打開vscodecmd + shift + p輸入 flutter 選擇 new project

image

這時候可能會提示 找不到 flutter sdk

image

手動導入下 （我是安裝在 ~目錄下直接選擇flutter目錄就可以）

輸入新建的工程名,選擇存放路徑

這時候就會自動生成相關工程文件

這是模板工程，選擇模擬器就能直接跑了

先打開模擬器 open -a Simulator

這是最下角就可以選擇剛剛打開的模擬器

image

點擊debug 直接運行

image

模擬器就跑起來了，效果還不錯~

image

Tips

vscode 默認創建的 xcode工程是 OC版本的
如果想要創建swift 版本的話 就不能通過vscode 來創建

需要直接命令行創建

flutter create -i swift ProjectName

這時候就是用swift的工程了

image

kotlin 也一樣加參數-a kotlin 就行了

今后會陸續再更新更具體的練手項目，敬請期待吧~~~

我的博客即將搬運同步至騰訊云+社區，邀請大家一同入駐：https://cloud.tencent.com/developer/support-plan?invite_code=3nyifx0wvqecc

本頁內容由塔燈網絡科技有限公司通過網絡收集編輯所得，所有資料僅供用戶學習參考，本站不擁有所有權，如您認為本網頁中由涉嫌抄襲的內容，請及時與我們聯系，并提供相關證據，工作人員會在5工作日內聯系您，一經查實，本站立刻刪除侵權內容。本文鏈接:http://www.juherenli.com/18054.html