由于Flutter會(huì)同時(shí)構(gòu)建Android和IOS兩個(gè)平臺(tái)的發(fā)布包，所以Flutter同時(shí)依賴Android SDK和iOS SDK，在安裝Flutter時(shí)也需要安裝響應(yīng)平臺(tái)的構(gòu)建工具和
SDK。

1、獲取Flutter SDK

去Flutter官網(wǎng)下載其最新可用的安裝包，官網(wǎng)地址：https://flutter.io/sdk-archive/#macos

官網(wǎng)下載SDK.png

下載之后解壓，存放到一個(gè)目錄之下，我存放的目錄是/Users/xietao/Documents

2、使用鏡像和配置環(huán)境變量

由于在國內(nèi)訪問Flutter有時(shí)可能會(huì)受到限制，F(xiàn)lutter官方為中國開發(fā)者搭建了臨時(shí)鏡像，大家可以將如下環(huán)境變量加入到用戶環(huán)境變量中：

使用命令：vi ~/.bash_profile

export PUB_HOSTED_URL=https://pub.flutter-io.cn export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn export PATH=/Users/xietao/Documents/flutter/bin:$PATH 

最后一個(gè)環(huán)境變量是flutter sdk的目錄

然后保存:wq退出vi環(huán)境

運(yùn)行 source $HOME/.bash_profile 刷新當(dāng)前終端窗口。這時(shí)候新增加的環(huán)境變量就生效了

可以使用echo $PATH來驗(yàn)證flutter/bin是否已在PATH中。

3、運(yùn)行flutter doctor來查看是否還需要安裝其它依賴

運(yùn)行后會(huì)發(fā)現(xiàn)缺少一些其他依賴，就按照提示一個(gè)個(gè)安裝好就行

運(yùn)行doctor檢查.png

安裝好之后如下顯示就可以了，我這里沒有管IntelliJ IDEA

安裝依賴完成.png

4、更新flutter

查看Flutter各個(gè)分支，使用命令Flutter channel

圖片.png

帶*號(hào)的分支即你本地的Flutter SDK 跟蹤的分支，要切換分支，可以使用flutter channel beta 或 flutter channel master，F(xiàn)lutter官方建議跟蹤穩(wěn)定分支，但你也可以跟蹤master分支，這樣可以查看最新的變化，但這樣穩(wěn)定性要低的多。

要升級(jí)flutter sdk，只需一句命令：flutter upgrade

該命令會(huì)同時(shí)更新Flutter SDK和你的flutter項(xiàng)目依賴包。如果你只想更新項(xiàng)目依賴包（不包括Flutter SDK），可以使用如下命令：

flutter packages get 獲取項(xiàng)目所有的依賴包。 flutter packages upgrade 獲取項(xiàng)目所有依賴包 

的最新版本。

5、IDE配置與使用

理論上可以使用任何文本編輯器與命令行工具來構(gòu)建Flutter應(yīng)用程序，比如上邊沒有配置的IntelliJ IDEA也可以。 不過，F(xiàn)lutter官方建議使用Android Studio和VS Code之一以獲得更好的開發(fā)體驗(yàn)。Flutter官方提供了這兩款編輯器插件，通過IDE和插件可獲得代碼補(bǔ)全、語法高亮、widget編輯輔助、運(yùn)行和調(diào)試支持等功能，可以幫助我們極大的提高開發(fā)效率。下邊介紹一下Android Studio的配置

安裝兩個(gè)插件：Dart和Flutter

• Flutter插件： 支持Flutter開發(fā)工作流 (運(yùn)行、調(diào)試、熱重載等)。
• Dart插件： 提供代碼分析 (輸入代碼時(shí)進(jìn)行驗(yàn)證、代碼補(bǔ)全等)

安裝步驟：

• 啟動(dòng)Android Studio。
• 打開插件首選項(xiàng) (Preferences>Plugins)。
• 選擇 Browse repositories…，選擇 flutter 插件并點(diǎn)擊 install。
• 重啟Android Studio后插件生效。

接下來，讓我們用Android Studio創(chuàng)建一個(gè)Flutter項(xiàng)目，然后運(yùn)行它，并體驗(yàn)“熱重載”。

6、創(chuàng)建Flutter項(xiàng)目

安裝好插件之后，重啟Android Studio在面板上就會(huì)多了一個(gè)創(chuàng)建Flutter的選項(xiàng)，點(diǎn)擊創(chuàng)建一個(gè)Flutter項(xiàng)目

• 選擇 File>New Flutter Project 。
• 選擇 Flutter application 作為 project 類型, 然后點(diǎn)擊 Next。
• 輸入項(xiàng)目名稱 (如 first_flutter_app)，然后點(diǎn)擊 Next。
  點(diǎn)擊 Finish。
• 等待Android Studio安裝SDK并創(chuàng)建項(xiàng)目。

上述命令創(chuàng)建一個(gè)Flutter項(xiàng)目，項(xiàng)目名為first_flutter_app，其中包含一個(gè)使用Material 組件的簡單演示應(yīng)用程序。

在項(xiàng)目目錄中，您應(yīng)用程序的代碼位于 lib/main.dart。

創(chuàng)建Flutter項(xiàng)目.png 創(chuàng)建應(yīng)用.png

一步一步進(jìn)行

創(chuàng)建應(yīng)用2.png 代碼部分.png

iPhone上運(yùn)行效果

iPhone上效果.png

Android上運(yùn)行效果

Android上效果.png
本頁內(nèi)容由塔燈網(wǎng)絡(luò)科技有限公司通過網(wǎng)絡(luò)收集編輯所得，所有資料僅供用戶學(xué)習(xí)參考，本站不擁有所有權(quán)，如您認(rèn)為本網(wǎng)頁中由涉嫌抄襲的內(nèi)容，請(qǐng)及時(shí)與我們聯(lián)系，并提供相關(guān)證據(jù)，工作人員會(huì)在5工作日內(nèi)聯(lián)系您，一經(jīng)查實(shí)，本站立刻刪除侵權(quán)內(nèi)容。本文鏈接:http://www.cokiv.cn/18387.html