跨平臺(tái)移動(dòng)開發(fā) Flutter 初體驗(yàn)

原先一直都是在做iOS的原生開發(fā),Android也是興趣平平缚俏,曾經(jīng)也是很想學(xué)習(xí)下RN的尔崔,無(wú)奈web前端跟js的一些相關(guān)內(nèi)容實(shí)在不熟悉,直到這次的flutter的出現(xiàn) 讓我重新有股學(xué)習(xí)的沖動(dòng)摹量。so,本文比較傾向于iOS的調(diào)試馒胆,所有的內(nèi)容都是建立在對(duì)iOS原生開發(fā)比較熟悉的基礎(chǔ)上缨称。

image

安裝flutter

官網(wǎng)flutter.io

當(dāng)然跟著我做也一樣

安裝sdk

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

一次執(zhí)行下面幾條命令

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

export PATH=`pwd`/flutter/bin:$PATH

flutter doctor

將flutter添加到環(huán)境變量中

vim ~/.brash_profile

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

//這個(gè)是配置Android相關(guān)的 沒(méi)有Android studio 或者 只要測(cè)試iOS的話 這幾個(gè)可以先不管
export ANDROID_HOME="/Users/用戶名/Documents/android_sdk" //android sdk目錄祝迂,替換為你自己的即可
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools

執(zhí)行source ~/.brash_profile

最后檢查下echo $PATH 看看 是否已經(jīng)添加到環(huán)境變量中

image

flutter doctor 命令是用來(lái)檢查依賴環(huán)境

最后結(jié)果是這樣的


image

按照他的提示把缺少的內(nèi)容安裝一下睦尽,我這里就主要安裝iOS相關(guān)的幾樣?xùn)|西先

 brew install --HEAD libimobiledevice
 brew install ideviceinstaller
 brew install ios-deploy

pod 大家應(yīng)該都有裝

但是在安裝上面三個(gè)東西的時(shí)候brew居然給我報(bào)錯(cuò)了

/usr/local/include is not writable.

這是什么鬼。型雳。当凡。查了很多方法
最后 解決方法 居然發(fā)現(xiàn) /usr/local/ 目錄下居然沒(méi)有include這個(gè)目錄,手動(dòng)添加一個(gè)include目錄解決>兰蟆Q亓俊!

link完成后再運(yùn)行flutter doctor 看到iOS這塊沒(méi)問(wèn)題就OK了 (Android暫時(shí)不管了)

image

安裝VSCode

考慮到對(duì)Android studio 不是很熟悉冤荆,所以這次選擇了 vscode

直接在官網(wǎng)下載vscode


image

安裝flutter插件

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

輸入 install 選擇插件安裝

image

先安裝 flutter 的語(yǔ)言包 dart

image

接下來(lái)繼續(xù)安裝 flutter 插件

image

新建Flutter工程

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

image

這時(shí)候可能會(huì)提示 找不到 flutter sdk


image

手動(dòng)導(dǎo)入下 (我是安裝在 ~目錄下直接選擇flutter目錄就可以)

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

這時(shí)候就會(huì)自動(dòng)生成相關(guān)工程文件

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

先打開模擬器 open -a Simulator

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


image

點(diǎn)擊debug 直接運(yùn)行


image

模擬器就跑起來(lái)了,效果還不錯(cuò)~


image

Tips

vscode 默認(rèn)創(chuàng)建的 xcode工程是 OC版本的
如果想要?jiǎng)?chuàng)建swift 版本的話 就不能通過(guò)vscode 來(lái)創(chuàng)建

需要直接命令行創(chuàng)建

flutter create -i swift ProjectName

這時(shí)候就是用swift的工程了

image

kotlin 也一樣 加參數(shù)-a kotlin 就行了

今后會(huì)陸續(xù)再更新更具體的練手項(xiàng)目钓简,敬請(qǐng)期待吧~~~

我的博客即將搬運(yùn)同步至騰訊云+社區(qū)佛掖,邀請(qǐng)大家一同入駐:https://cloud.tencent.com/developer/support-plan?invite_code=3nyifx0wvqecc

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市涌庭,隨后出現(xiàn)的幾起案子芥被,更是在濱河造成了極大的恐慌,老刑警劉巖坐榆,帶你破解...
    沈念sama閱讀 216,470評(píng)論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件拴魄,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡席镀,警方通過(guò)查閱死者的電腦和手機(jī)匹中,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,393評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)豪诲,“玉大人顶捷,你說(shuō)我怎么就攤上這事∈豪椋” “怎么了服赎?”我有些...
    開封第一講書人閱讀 162,577評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵葵蒂,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我重虑,道長(zhǎng)践付,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,176評(píng)論 1 292
  • 正文 為了忘掉前任缺厉,我火速辦了婚禮永高,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘提针。我一直安慰自己命爬,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,189評(píng)論 6 388
  • 文/花漫 我一把揭開白布辐脖。 她就那樣靜靜地躺著饲宛,像睡著了一般。 火紅的嫁衣襯著肌膚如雪揖曾。 梳的紋絲不亂的頭發(fā)上落萎,一...
    開封第一講書人閱讀 51,155評(píng)論 1 299
  • 那天亥啦,我揣著相機(jī)與錄音炭剪,去河邊找鬼。 笑死翔脱,一個(gè)胖子當(dāng)著我的面吹牛奴拦,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播届吁,決...
    沈念sama閱讀 40,041評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼错妖,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了疚沐?” 一聲冷哼從身側(cè)響起暂氯,我...
    開封第一講書人閱讀 38,903評(píng)論 0 274
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎亮蛔,沒(méi)想到半個(gè)月后痴施,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,319評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,539評(píng)論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了贩猎。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片彤侍。...
    茶點(diǎn)故事閱讀 39,703評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖撞鹉,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤哩簿,帶...
    沈念sama閱讀 35,417評(píng)論 5 343
  • 正文 年R本政府宣布宵蕉,位于F島的核電站,受9級(jí)特大地震影響卡骂,放射性物質(zhì)發(fā)生泄漏国裳。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,013評(píng)論 3 325
  • 文/蒙蒙 一全跨、第九天 我趴在偏房一處隱蔽的房頂上張望缝左。 院中可真熱鬧,春花似錦浓若、人聲如沸渺杉。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,664評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)是越。三九已至,卻和暖如春碌上,著一層夾襖步出監(jiān)牢的瞬間倚评,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,818評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工馏予, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留天梧,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,711評(píng)論 2 368
  • 正文 我出身青樓霞丧,卻偏偏與公主長(zhǎng)得像呢岗,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子蛹尝,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,601評(píng)論 2 353

推薦閱讀更多精彩內(nèi)容