Flutter 1.0 MAC環(huán)境入門實(shí)戰(zhàn)

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è)置。

  1. 安裝 homebrew (如果已經(jīng)安裝了brew,跳過(guò)此步驟).
  2. 打開(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 工具欄:
    ![Main IntelliJ toolbar](http://upload-images.jianshu.io/upload_images/1712705-d637f9fd42febee3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

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)用程序:
    ![Starter App on Android](http://upload-images.jianshu.io/upload_images/1712705-a937d5c4fdea9695.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

## 體驗(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ì)立即看到更新后的字符串。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容