Flutter 1.0 MAC環境入門實戰

Flutter MacOS iOS開發 · 發表 2018-12-10 11:27:40

摘要： 1. 使用映象由於在國內訪問Flutter有時可能會受到限制，Flutter官方為中國開發者搭建了臨時映象大家可以將如下環境變數加入到使用者環境變數中：開啟終端：執行下面兩行程式碼： export PUB_HOSTED_URL=https://pub....

1. 使用映象

由於在國內訪問Flutter有時可能會受到限制，Flutter官方為中國開發者搭建了臨時映象
大家可以將如下環境變數加入到使用者環境變數中：
開啟終端：執行下面兩行程式碼：
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
**注意：** 此映象為臨時映象，並不能保證一直可用，讀者可以參考詳情請參考 [Using Flutter in China](https://github.com/flutter/flutter/wiki/Using-Flutter-in-China) 以獲得有關映象伺服器的最新動態。

系統要求
要安裝並執行Flutter，您的開發環境必須滿足以下最低要求:
作業系統: macOS (64-bit)
磁碟空間: 700 MB (不包括Xcode或Android+Studio/">Android Studio的磁碟空間）.
工具: Flutter 依賴下面這些命令列工具.
bash, mkdir, rm, git, curl, unzip, which

2. 獲取Flutter SDK
ofollow,noindex">去Flutter官網下載最新版本

下載成功後，把FlutterSDK 放到指定的目錄中

執行 flutter doctor

## iOS 設定

### 安裝 Xcode

要為iOS開發Flutter應用程式，您需要Xcode 7.2或更高版本:

1.安裝Xcode 7.2或更新版本(通過[連結下載](https://developer.apple.com/xcode/)或[蘋果應用商店](https://itunes.apple.com/us/app/xcode/id497799835)).

2.配置Xcode命令列工具以使用新安裝的Xcode版本 `sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer` 對於大多數情況，當您想要使用最新版本的Xcode時，這是正確的路徑。如果您需要使用不同的版本，請指定相應路徑。

3.確保Xcode許可協議是通過開啟一次Xcode或通過命令`sudo xcodebuild -license`同意過了.

使用Xcode，您可以在iOS裝置或模擬器上執行Flutter應用程式。

### 設定iOS模擬器

要準備在iOS模擬器上執行並測試您的Flutter應用，請按以下步驟操作：

1.在Mac上，通過Spotlight或使用以下命令找到模擬器:

使用terminal(終端)
$:open -a Simulator
2. 通過檢查模擬器 硬體>裝置 選單中的設定，確保您的模擬器正在使用64位裝置（iPhone 5s或更高版本）.
3. 根據您的開發機器的螢幕大小，模擬的高清屏iOS裝置可能會使您的螢幕溢位。在模擬器的 Window> Scale 選單下設定裝置比例
4. 執行 flutter run啟動您的應用.

安裝到iOS裝置

要將您的Flutter應用安裝到iOS真機裝置，您需要一些額外的工具和一個Apple帳戶，您還需要在Xcode中進行設定。

安裝homebrew （如果已經安裝了brew,跳過此步驟）.
開啟終端並執行這些命令來安裝用於將Flutter應用安裝到iOS裝置的工具

brew update
brew install --HEAD libimobiledevice
brew install ideviceinstaller ios-deploy cocoapods
pod setup

Android Studio

## Android Studio 安裝

*Android Studio:* 為Flutter提供完整的IDE體驗

### 安裝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外掛

需要安裝兩個外掛:

*`Flutter`外掛： 支援Flutter開發工作流 (執行、除錯、熱過載等).
*`Dart`外掛： 提供程式碼分析 (輸入程式碼時進行驗證、程式碼補全等).

要安裝這些:

1.啟動Android Studio.
2.開啟外掛首選項 (**Preferences>Plugins** on macOS, **File>Settings>Plugins** on Windows & Linux).
3.選擇 **Browse repositories…**, 選擇 Flutter 外掛並點選 `install`.
4.重啟Android Studio後外掛生效.

*Android Studio:* 為Flutter提供完整的IDE體驗.

## 建立新應用

1.選擇 **File>New Flutter Project**
2.選擇 **Flutter application** 作為 project 型別, 然後點選 Next
3.輸入專案名稱 (如 `myapp`), 然後點選 Next
4.點選 **Finish**
5.等待Android Studio安裝SDK並建立專案.

上述命令建立一個Flutter專案，專案名為myapp，其中包含一個使用[Material 元件](https://material.io/guidelines/)的簡單演示應用程式。

在專案目錄中，您應用程式的程式碼位於 `lib/main.dart`.

## 執行應用程式

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** 中, 選擇一個執行該應用的Android裝置. 如果沒有列出可用，請選擇 **Tools>Android>AVD Manager** 並在那裡建立一個
3.在工具欄中點選 **Run圖示**, 或者呼叫選單項 **Run > Run**.
4.如果一切正常, 您應該在您的裝置或模擬器上會看到啟動的應用程式:
![Starter App on Android](http://upload-images.jianshu.io/upload_images/1712705-a937d5c4fdea9695.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

## 體驗熱過載

Flutter 可以通過 *熱過載（hot reload）* 實現快速的開發週期，熱過載就是無需重啟應用程式就能實時載入修改後的程式碼，並且不會丟失狀態（譯者語:如果是一個web開發者，那麼可以認為這和webpack的熱過載是一樣的）。簡單的對程式碼進行更改，然後告訴IDE或命令列工具你需要重新載入（點選reload按鈕），你就會在你的裝置或模擬器上看到更改。

1.將字串
`'You have pushed the button this many times:'` 更改為
`'You have clicked the button this many times:'`
2.不要按“Stop”按鈕; 讓您的應用繼續執行。
3.要檢視您的更改, 只需呼叫 **Save All** (`cmd-s` / `ctrl-s`), 或點選 **熱過載按鈕** (帶有閃電:zap:️圖示的按鈕).

你就會立即看到更新後的字串。

Flutter 1.0 MAC環境入門實戰

您可能也會喜歡…