1. 使用鏡像
由于在國(guó)內(nèi)訪問(wèn)Flutter有時(shí)可能會(huì)受到限制,F(xiàn)lutter官方為中國(guó)開(kāi)發(fā)者搭建了臨時(shí)鏡像
大家可以將如下環(huán)境變量加入到用戶環(huán)境變量中:
打開(kāi)終端:運(yùn)行下面兩行代碼:
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
**注意:** 此鏡像為臨時(shí)鏡像,并不能保證一直可用,讀者可以參考詳情請(qǐng)參考 [Using Flutter in China](https://github.com/flutter/flutter/wiki/Using-Flutter-in-China) 以獲得有關(guān)鏡像服務(wù)器的最新動(dòng)態(tài)。
系統(tǒng)要求
要安裝并運(yùn)行Flutter,您的開(kāi)發(fā)環(huán)境必須滿足以下最低要求:
操作系統(tǒng): macOS (64-bit)
磁盤空間: 700 MB (不包括Xcode或Android Studio的磁盤空間).
工具: Flutter 依賴下面這些命令行工具.
bash, mkdir, rm, git, curl, unzip, which
2. 獲取Flutter SDK
去Flutter官網(wǎng)下載最新版本
下載成功后,把FlutterSDK 放到指定的目錄中
運(yùn)行 flutter doctor
## iOS 設(shè)置
### 安裝 Xcode
要為iOS開(kāi)發(fā)Flutter應(yīng)用程序,您需要Xcode 7.2或更高版本:
1. 安裝Xcode 7.2或更新版本(通過(guò)[鏈接下載](https://developer.apple.com/xcode/)或[蘋果應(yīng)用商店](https://itunes.apple.com/us/app/xcode/id497799835)).
2. 配置Xcode命令行工具以使用新安裝的Xcode版本 `sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer` 對(duì)于大多數(shù)情況,當(dāng)您想要使用最新版本的Xcode時(shí),這是正確的路徑。如果您需要使用不同的版本,請(qǐng)指定相應(yīng)路徑。
3. 確保Xcode許可協(xié)議是通過(guò)打開(kāi)一次Xcode或通過(guò)命令`sudo xcodebuild -license`同意過(guò)了.
使用Xcode,您可以在iOS設(shè)備或模擬器上運(yùn)行Flutter應(yīng)用程序。
### 設(shè)置iOS模擬器
要準(zhǔn)備在iOS模擬器上運(yùn)行并測(cè)試您的Flutter應(yīng)用,請(qǐng)按以下步驟操作:
1. 在Mac上,通過(guò)Spotlight或使用以下命令找到模擬器:
使用terminal(終端)
$:open -a Simulator
2. 通過(guò)檢查模擬器 硬件>設(shè)備 菜單中的設(shè)置,確保您的模擬器正在使用64位設(shè)備(iPhone 5s或更高版本).
3. 根據(jù)您的開(kāi)發(fā)機(jī)器的屏幕大小,模擬的高清屏iOS設(shè)備可能會(huì)使您的屏幕溢出。在模擬器的 Window> Scale 菜單下設(shè)置設(shè)備比例
4. 運(yùn)行 flutter run啟動(dòng)您的應(yīng)用.
安裝到iOS設(shè)備
要將您的Flutter應(yīng)用安裝到iOS真機(jī)設(shè)備,您需要一些額外的工具和一個(gè)Apple帳戶,您還需要在Xcode中進(jìn)行設(shè)置。
- 安裝 homebrew (如果已經(jīng)安裝了brew,跳過(guò)此步驟).
- 打開(kāi)終端并運(yùn)行這些命令來(lái)安裝用于將Flutter應(yīng)用安裝到iOS設(shè)備的工具
brew update
brew install --HEAD libimobiledevice
brew install ideviceinstaller ios-deploy cocoapods
pod setup
Android Studio
## Android Studio 安裝
*Android Studio:* 為Flutter提供完整的IDE體驗(yàn)
### 安裝Android Studio
* [Android Studio](https://developer.android.com/studio/index.html), 3.0或更高版本.
或者,您也可以使用IntelliJ:
* [IntelliJ IDEA Community](https://www.jetbrains.com/idea/download/), version 2017.1或更高版本.
* [IntelliJ IDEA Ultimate](https://www.jetbrains.com/idea/download/), version 2017.1 或更高版本.
### 安裝Flutter和Dart插件
需要安裝兩個(gè)插件:
* `Flutter`插件: 支持Flutter開(kāi)發(fā)工作流 (運(yùn)行、調(diào)試、熱重載等).
* `Dart`插件: 提供代碼分析 (輸入代碼時(shí)進(jìn)行驗(yàn)證、代碼補(bǔ)全等).
要安裝這些:
1. 啟動(dòng)Android Studio.
2. 打開(kāi)插件首選項(xiàng) (**Preferences>Plugins** on macOS, **File>Settings>Plugins** on Windows & Linux).
3. 選擇 **Browse repositories…**, 選擇 Flutter 插件并點(diǎn)擊 `install`.
4. 重啟Android Studio后插件生效.
*Android Studio:* 為Flutter提供完整的IDE體驗(yàn).
## 創(chuàng)建新應(yīng)用
1. 選擇 **File>New Flutter Project**
2. 選擇 **Flutter application** 作為 project 類型, 然后點(diǎn)擊 Next
3. 輸入項(xiàng)目名稱 (如 `myapp`), 然后點(diǎn)擊 Next
4. 點(diǎn)擊 **Finish**
5. 等待Android Studio安裝SDK并創(chuàng)建項(xiàng)目.
上述命令創(chuàng)建一個(gè)Flutter項(xiàng)目,項(xiàng)目名為myapp,其中包含一個(gè)使用[Material 組件](https://material.io/guidelines/)的簡(jiǎn)單演示應(yīng)用程序。
在項(xiàng)目目錄中,您應(yīng)用程序的代碼位于 `lib/main.dart`.
## 運(yùn)行應(yīng)用程序
1. 定位到Android Studio 工具欄:

2. 在 **target selector** 中, 選擇一個(gè)運(yùn)行該應(yīng)用的Android設(shè)備. 如果沒(méi)有列出可用,請(qǐng)選擇 **Tools>Android>AVD Manager** 并在那里創(chuàng)建一個(gè)
3. 在工具欄中點(diǎn)擊 **Run圖標(biāo)**, 或者調(diào)用菜單項(xiàng) **Run > Run**.
4. 如果一切正常, 您應(yīng)該在您的設(shè)備或模擬器上會(huì)看到啟動(dòng)的應(yīng)用程序:

## 體驗(yàn)熱重載
Flutter 可以通過(guò) *熱重載(hot reload)* 實(shí)現(xiàn)快速的開(kāi)發(fā)周期,熱重載就是無(wú)需重啟應(yīng)用程序就能實(shí)時(shí)加載修改后的代碼,并且不會(huì)丟失狀態(tài)(譯者語(yǔ):如果是一個(gè)web開(kāi)發(fā)者,那么可以認(rèn)為這和webpack的熱重載是一樣的)。簡(jiǎn)單的對(duì)代碼進(jìn)行更改,然后告訴IDE或命令行工具你需要重新加載(點(diǎn)擊reload按鈕),你就會(huì)在你的設(shè)備或模擬器上看到更改。
1. 將字符串
`'You have pushed the button this many times:'` 更改為
`'You have clicked the button this many times:'`
2. 不要按“Stop”按鈕; 讓您的應(yīng)用繼續(xù)運(yùn)行。
3. 要查看您的更改, 只需調(diào)用 **Save All** (`cmd-s` / `ctrl-s`), 或點(diǎn)擊 **熱重載按鈕** (帶有閃電??圖標(biāo)的按鈕).
你就會(huì)立即看到更新后的字符串。