Mac下安裝Flutter北戏,并創(chuàng)建第一個(gè)App

相關(guān)軟件安裝

JDK安裝

  • 下載

前往下載頁面下載安裝包:http://www.oracle.com/technetwork/java/javase/downloads/index.html

下載8.x的版本,8以上的會(huì)出問題

  • 安裝

雙擊安裝包哼勇,一路下一步至完成

  • 配置

找到j(luò)dk安裝路徑都伪,一版情況為:/Library/Java/JavaVirtualMachines/jdk-8.jdk/Contents/Home

也可以打開訪達(dá),選擇菜單【前往】-【電腦】积担,隨后進(jìn)入路徑【Macintosh HD】-【資源庫】中看是否存在Java文件夾陨晶,然后找尋安裝路徑;

檢查用戶文件夾下是否存在.bash_profile文件帝璧,不存在則創(chuàng)建;

將如下代碼添加到.bash_profile文件中

JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk-10.0.1.jdk/Contents/Home
PATH=$JAVA_HOME/bin:$PATH:.
CLASSPATH=$JAVA_HOME/lib/tools.jar:$JAVA_HOME/lib/dt.jar:.
export JAVA_HOME
export PATH
export CLASSPATH

在終端輸入如下命令是配置生效

source ~/.bash_profile

輸入如下命令檢測(cè)是否配置成功先誉,如果成功將輸出配置的路徑

echo $JAVA_HOME

Android Studio安裝

  • 下載

前往下載頁面下載安裝包:https://developer.android.com/studio/
或者直接點(diǎn)擊下載Android Studio v3.1.3
請(qǐng)?jiān)诠倬W(wǎng)下載,避免出現(xiàn)XcodeGhost類似問題

  • 安裝

雙擊安裝包的烁,將應(yīng)用拖拽到【應(yīng)用程序】中褐耳,完成安裝。

  • 配置

安裝完成后打開Android Studio應(yīng)用;
第一次打開會(huì)詢問是否導(dǎo)入設(shè)置渴庆,按照需求選擇铃芦,我是第一使用雅镊,我選擇第二項(xiàng);


image

第一次使用會(huì)彈出無法訪問Android SDK,暫時(shí)點(diǎn)Cancel刃滓;

image

隨后界面一路藍(lán)色按鈕點(diǎn)擊即可仁烹。

最后一步是下載相關(guān)資源,下載結(jié)束后即可進(jìn)入Android Studio了咧虎。

在.bash_profile中放入下列代碼

export ANDROID_HOME=/Users/mingyu/Library/Android/sdk
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools

還要安裝插件卓缰,打開Android Studio,在【首頁】-【Configure】-【Plugins】中所有插件Flutter和Dart進(jìn)行安裝砰诵;

Xcode安裝

直接在App Store中搜索Xcode進(jìn)行安裝

VSCode安裝

開發(fā)IDE征唬,直接去官網(wǎng)下載,下載安裝后茁彭,需要安裝兩個(gè)擴(kuò)展:Dart和Flutter总寒,直接在擴(kuò)展中搜索安裝即可。

Brew安裝

包管理工具理肺,flutter必須的一些包需要用它來安裝偿乖;

前往官方網(wǎng)站,按照上面最新的提示進(jìn)行安裝哲嘲;
安裝好后贪薪,可以選擇使用國內(nèi)鏡像,打開終端眠副,執(zhí)行下列命令:

# 參考文檔:https://mirror.tuna.tsinghua.edu.cn/help/homebrew/

cd /usr/local/Homebrew

git remote set-url origin https://mirrors.tuna.tsinghua.edu.cn/git/homebrew/brew.git

cd /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core

git remote set-url origin https://mirrors.tuna.tsinghua.edu.cn/git/homebrew/homebrew-core.git

brew update
# update 時(shí)間較長画切,耐心等待

Flutter安裝

  • 下載

執(zhí)行下列命令下載最新的flutter代碼(系統(tǒng)請(qǐng)先安裝Git)

git clone -b beta https://github.com/flutter/flutter.git
  • 安裝&配置

在用戶文件夾下找到.bash_profile文件,如果沒有就創(chuàng)建一個(gè);

在文件中加入如下代碼:

export PUB_HOSTED_URL=https://pub.flutter-io.cn # 國內(nèi)用戶需要設(shè)置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn # 國內(nèi)用戶需要設(shè)置
export PATH={Fluter代碼存放目錄}/bin:$PATH

添加保存后囱怕,執(zhí)行下列命令刷新終端:

source $HOME/.bash_profile

運(yùn)行下列命令檢查flutter是否已經(jīng)安裝成功:

flutter -v

第一次運(yùn)行會(huì)安裝一些東西霍弹,然后顯示歡迎提示,告知已經(jīng)安裝成功娃弓;

接下來需要運(yùn)行下列命令檢查flutter的依賴項(xiàng):

flutter doctor

運(yùn)行該命令后典格,flutter會(huì)提示你那些東西是必須要的,需要執(zhí)行什么命令進(jìn)行安裝台丛,按照提示安裝即可耍缴;

其中必要的一項(xiàng),請(qǐng)創(chuàng)一個(gè)虛擬Android虛擬設(shè)備挽霉,并保持開機(jī)狀態(tài)防嗡。

第一個(gè)Flutter App

打開VSCode,按F1(有touchbar的機(jī)子按住fn可見F1)呼出命令輸入框侠坎;

輸入字符Flutter蚁趁,在命令候選列表中選擇Flutter: New Project,新建一個(gè)Flutter項(xiàng)目实胸,隨后讓你填寫項(xiàng)目名稱和選擇項(xiàng)目存放路徑他嫡;

項(xiàng)目創(chuàng)建好后番官,在VSCode右下角選擇調(diào)試環(huán)境目標(biāo):


image

按F5運(yùn)行項(xiàng)目;

這里我遇到了報(bào)錯(cuò)有關(guān)于gradle的钢属,解決方案是刪除用戶文件夾下的.gradle文件夾鲤拿,然后使用brew重新安裝gradle;
gradle安裝參考:https://gradle.org/

不報(bào)錯(cuò)的情況下署咽,VSCode會(huì)下載一些必要資源,然后在目標(biāo)設(shè)備(右下角選擇的)上運(yùn)行app生音;


image

至此宁否,F(xiàn)lutter安裝完畢,正常運(yùn)行缀遍!接下來就是Flutter開發(fā)之旅了~~

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末慕匠,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子域醇,更是在濱河造成了極大的恐慌台谊,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,542評(píng)論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件譬挚,死亡現(xiàn)場(chǎng)離奇詭異锅铅,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)减宣,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,822評(píng)論 3 394
  • 文/潘曉璐 我一進(jìn)店門盐须,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人漆腌,你說我怎么就攤上這事贼邓。” “怎么了闷尿?”我有些...
    開封第一講書人閱讀 163,912評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵塑径,是天一觀的道長。 經(jīng)常有香客問我填具,道長统舀,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,449評(píng)論 1 293
  • 正文 為了忘掉前任劳景,我火速辦了婚禮绑咱,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘枢泰。我一直安慰自己描融,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,500評(píng)論 6 392
  • 文/花漫 我一把揭開白布衡蚂。 她就那樣靜靜地躺著窿克,像睡著了一般骏庸。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上年叮,一...
    開封第一講書人閱讀 51,370評(píng)論 1 302
  • 那天具被,我揣著相機(jī)與錄音,去河邊找鬼只损。 笑死一姿,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的跃惫。 我是一名探鬼主播叮叹,決...
    沈念sama閱讀 40,193評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼爆存!你這毒婦竟也來了蛉顽?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,074評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤先较,失蹤者是張志新(化名)和其女友劉穎携冤,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體闲勺,經(jīng)...
    沈念sama閱讀 45,505評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡曾棕,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,722評(píng)論 3 335
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了菜循。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片睁蕾。...
    茶點(diǎn)故事閱讀 39,841評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖债朵,靈堂內(nèi)的尸體忽然破棺而出子眶,到底是詐尸還是另有隱情,我是刑警寧澤序芦,帶...
    沈念sama閱讀 35,569評(píng)論 5 345
  • 正文 年R本政府宣布臭杰,位于F島的核電站,受9級(jí)特大地震影響谚中,放射性物質(zhì)發(fā)生泄漏渴杆。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,168評(píng)論 3 328
  • 文/蒙蒙 一宪塔、第九天 我趴在偏房一處隱蔽的房頂上張望磁奖。 院中可真熱鬧,春花似錦某筐、人聲如沸比搭。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,783評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽身诺。三九已至蜜托,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間霉赡,已是汗流浹背橄务。 一陣腳步聲響...
    開封第一講書人閱讀 32,918評(píng)論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留穴亏,地道東北人蜂挪。 一個(gè)月前我還...
    沈念sama閱讀 47,962評(píng)論 2 370
  • 正文 我出身青樓,卻偏偏與公主長得像嗓化,于是被迫代替她去往敵國和親棠涮。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,781評(píng)論 2 354

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