這篇博客我們介紹了Flutter赖钞，并且對比了H5需纳，React Native骗随，F(xiàn)lutter。
由于Flutter是跨平臺的開發(fā)框架赴叹，開發(fā)一次可以同時運(yùn)行在Android和iOS上面鸿染，所以我們開發(fā)時最好使用Mac系統(tǒng)，這樣我們可以同時測試兩個平臺的運(yùn)行效果乞巧。
本文我們就來介紹在Mac系統(tǒng)下安裝與配置Flutter開發(fā)環(huán)境涨椒，并且運(yùn)行我們的第一個Flutter應(yīng)用！
為了Flutter的安裝配置順利绽媒，請科學(xué)上網(wǎng)蚕冬。
安裝Flutter SDK
首先，我們需要首先下載Flutter的SDK是辕，通過官網(wǎng)的這個鏈接可以找到每個版本的下載鏈接囤热，找到最新穩(wěn)定版下載。寫這篇文章時的最新版是v1.2.1版本获三，我們就以這個版本來舉例旁蔼。
-
下載完成后我們對SDK進(jìn)行解壓，可以解壓到任何位置疙教。我們這里解壓到用戶主目錄下的development目錄牌芋。下面我們打開終端執(zhí)行以下命令：
mkdir ~/development cd ~/development unzip ~/Downloads/flutter_macos_v1.2.1-stable.zip -
將解壓后的路徑加入到環(huán)境變量中。
- 打開用戶目錄下的.bash_profile文件松逊，如果沒有則新建這個文件：
> ~/.bash_profile- 在這個文件的最后添加SDK的路徑到PATH中：
export PATH="用戶路徑/development/flutter/bin:$PATH"- 然后執(zhí)行source讓配置生效：
source ~/.bash_profile
檢查Flutter安裝狀態(tài)
配置好后，F(xiàn)lutter提供了一個檢查安裝狀態(tài)的命令：
flutter doctor
運(yùn)行以終端會輸出當(dāng)前的Flutter環(huán)境是否正確肯夏，還需要安裝什么等等经宏，比如Android SDK，iOS的開發(fā)環(huán)境等等驯击。
配置iOS開發(fā)環(huán)境
如果在Mac系統(tǒng)上開發(fā)Flutter應(yīng)用烁兰，筆者推薦使用iOS模擬器進(jìn)行開發(fā)調(diào)試，因?yàn)閕OS模擬器相比Android模擬器要更加快速與流暢徊都。
安裝Xcode
從Mac App Store搜索并安裝Xcode沪斟。
-
安裝完成后在終端里執(zhí)行以下命令配置最新的命令行工具：
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer -
打開一次Xcode并接受許可協(xié)議，或者通過命令行運(yùn)行下面命令：
sudo xcodebuild -license
配置iOS模擬器
-
通過命令行打開一個模擬器：
open -a Simulator 選擇模擬器暇矫，然后通過Hardware -> Device菜單查看確保當(dāng)前模擬的是iPhone5s之后的機(jī)型主之。
配置Android開發(fā)環(huán)境
下面我們來介紹安裝Android的開發(fā)環(huán)境。
安裝Android Studio
- 從官網(wǎng)下載最新版的Android Studio李根。
- 打開Android Studio槽奕，根據(jù)安裝向?qū)崾景惭b最新版的Android SDK，Android SDK Platform-Tools房轿，Android SDK Build-Tools粤攒。
配置Android模擬器
- 打開Android Studio后選擇Tools > Android > AVD Manager所森，然后選擇Create Virtual Device（創(chuàng)建虛擬設(shè)備）。
- 填入設(shè)備的信息然后下一步夯接，選擇鏡像的時候最好選擇架構(gòu)x86或者x86_64焕济，因?yàn)楹碗娔X的架構(gòu)一致，否則如果選擇ARM架構(gòu)的話模擬器運(yùn)行后會非晨福卡頓晴弃。
- (可選)選擇Hardware - GLES 2.0來進(jìn)行硬件加速，以使模擬器獲得更好的運(yùn)行速度问欠。
- 一切都選好后點(diǎn)擊Finish即完成配置肝匆。
配置代碼編輯器(IDE)
雖然Flutter開發(fā)可以使用很多IDE，比如Android Studio顺献，IntelliJ IDEA旗国，VS Code等等，你可以根據(jù)喜好進(jìn)行選擇注整。
但是筆者建議使用Android Studio能曾，因?yàn)樗鼘lutter開發(fā)支持的最好，并且谷歌官方也是推薦使用它肿轨。
下面我們就來介紹Android Studio的配置寿冕。
- 打開Android Studio。
- 安裝Flutter插件椒袍。選擇菜單Preferences > Plugins 然后點(diǎn)擊Browse repositories搜索Flutter驼唱，找到后開始安裝。
- 當(dāng)跳出安裝Dart插件的界面時驹暑，也點(diǎn)擊Yes進(jìn)行安裝玫恳。
- 安裝完成后重啟Android Studio。
上面我們已經(jīng)完成了Flutter開發(fā)環(huán)境的配置优俘，下面我們就開始創(chuàng)建我們的第一個應(yīng)用吧京办！
Flutter初識，第一個應(yīng)用帆焕！
我們打開Android Studio惭婿，然后選擇開始創(chuàng)建Flutter工程：
然后選擇Flutter Application，并點(diǎn)擊下一步：
在這個幾面填入你的工程名叶雹，SDK位置與保存位置等信息：
點(diǎn)擊下一步后财饥，需要輸入你的包名，也就是你的域名折晦，沒有域名的話輸入自己的名字一類的域名佑力，目的就是為了保證你的應(yīng)用的唯一性。
信息輸入完成后我們點(diǎn)擊"Finish"按鈕即可完成工程的創(chuàng)建筋遭。
當(dāng)我們的工程編譯完成后打颤，可以選擇不同的平臺運(yùn)行暴拄，如圖所示：
默認(rèn)的工程是一個簡單的計數(shù)器，選擇不同的平臺運(yùn)行后可以看到運(yùn)行后的界面：
恭喜编饺！第一個程序運(yùn)行成功地運(yùn)行起來了乖篷！
接下來我們就可以深入研究Flutter的強(qiáng)大特性了！
總結(jié)
本篇文章-Flutter的安裝配置并不復(fù)雜透且。另外還需要安裝配置iOS開發(fā)環(huán)境和Android開發(fā)環(huán)境撕蔼。當(dāng)然如果只是學(xué)習(xí)的話安裝iOS即可，如果你的電腦是Windows或者Linux的話秽誊，此時只能安裝配置Android開發(fā)環(huán)境了鲸沮，因?yàn)閕OS的開發(fā)環(huán)境只能在Mac上配置。還有Flutter的熱部署也會使開發(fā)效率提升很多锅论，大家可以試著改一些代碼體驗(yàn)一下讼溺。
