flutter開發(fā)入門（iOS）

這里以macOS為開發(fā)環(huán)境搭建，windows本人沒用畴栖，有需要可自行百度随静。

一.開發(fā)環(huán)境搭建

1.更改鏡像

國內(nèi)flutter由于**原因被墻，官方提供如下鏡像：

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

2.獲取flutter SDK

方式一：手動官網(wǎng)下載安裝包吗讶，下載地址：https://storage.flutter-io.cn/flutter_infra/releases/stable/macos/flutter_macos_v1.7.8+hotfix.3-stable.zip

下載完之后解壓放在自己想要的目錄下燎猛。

方式二：終端命令行克隆(這里我們克隆stable分支，也可以試試其他分支)

git clone -b stable https://github.com/flutter/flutter.git

3.配置flutter的PATH環(huán)境變量（簡單理解：終端命令行驅(qū)動地址）

3.1 設(shè)置當前窗口的環(huán)境變量

先定位到剛才下載的futter sdk路徑：

cd <flutter所在路徑>
export PATH="$PATH:'pwd'/flutter/bin"

這里只是臨時的設(shè)置環(huán)境變量照皆，下次通過終端進入操作flutter都需要這一步操作重绷，接下來我們教你設(shè)置永久的環(huán)境變量：

3.2 設(shè)置永久的環(huán)境變量

先打開mac上的隱藏文件，使用如下組合鍵：command+shift+.

定位到用戶庫文件目錄：

cd $HOME
open ./.bash_profile

以上命令行操作也可以直接進入庫文件目錄找到.bash_profile文件膜毁，沒有的話昭卓，我們可以用文本編輯創(chuàng)建一個，保存的時候以.bash_profile結(jié)尾就好了爽茴。

上面操作之后我們會打開.bash_profile這個文件葬凳，復制如下內(nèi)容粘貼進去

export PUB_HOSTED_URL=https://pub.flutter-io.cn //國內(nèi)用戶需要設(shè)置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //國內(nèi)用戶需要設(shè)置
export PATH=PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH

注意：PATH_TO_FLUTTER_GIT_DIRECTORY 為你flutter的路徑，比如“~/document/code”

刷新終端窗口：

source $HOME/.bash_profile

注意: 如果你使用的是zsh室奏，終端啟動時 ~/.bash_profile 將不會被加載火焰，解決辦法就是修改 ~/.zshrc ，在其中添加：source ~/.bash_profile

通過運行flutter/bin命令驗證目錄是否在已經(jīng)在PATH中:

echo $PATH

4.運行并檢測flutter

flutter doctor

該命令檢查您的環(huán)境并在終端窗口中顯示報告胧沫。Dart SDK已經(jīng)在捆綁在Flutter里了昌简，沒有必要單獨安裝Dart。仔細檢查命令行輸出以獲取可能需要安裝的其他軟件或進一步需要執(zhí)行的任務（以粗體顯示）绒怨。例如：

[-] Android toolchain - develop for Android devices 
? Android SDK at /Users/obiwan/Library/Android/sdk 
? Android SDK is missing command line tools; download from https://goo.gl/XxQghQ 
? Try re-installing or updating your Android SDK, visit https://flutter.io/setup/#android-setup for detailed instructions.

一般的錯誤會是xcode或Android Studio版本太低纯赎、或者沒有ANDROID_HOME環(huán)境變量等，請按照提示解決南蹂。下面貼一個筆者本機(mac)的環(huán)境變量配置犬金，您可以對比修正：

export PATH=/Users/用戶名/Documents/flutter/flutter/bin:$PATH
export ANDROID_HOME="/Users/用戶名/Documents/android_sdk" //android sdk目錄，替換為你自己的即可
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=[https://storage.flutter-io.cn](https://storage.flutter-io.cn/)

第一次運行一個flutter命令（如flutter doctor）時，它會下載它自己的依賴項并自行編譯晚顷。以后再運行就會快得多峰伙。

一旦你安裝了任何缺失的依賴，再次運行flutter doctor命令來驗證你是否已經(jīng)正確地設(shè)置了该默。

4.配置編輯器

4.1下載xcode（flutter中主要xcode主要用來build瞳氓，開發(fā)代碼不在xcode中編輯），作為ios開發(fā)這是必備栓袖，此處省略

4.2下載IDE匣摘，用來編輯dart代碼，debug等裹刮，在flutter中扮演重要角色音榜，

推薦VS Code（輕量級編輯器，支持Flutter運行和調(diào)試）或者Android Studio 必指，IntelliJ IDEA

4.3 給VC Code安裝flutter插件

1.啟動 VS Code

2.調(diào)用 View>Command Palette…

3.輸入 ‘install’, 然后選擇 Extensions: Install Extension action

4.在搜索框輸入 flutter , 在搜索結(jié)果列表中選擇 ‘Flutter’, 然后點擊 Install

5.選擇 ‘OK’ 重新啟動 VS Code

通過Flutter Doctor驗證您的設(shè)置

1調(diào)用 View>Command Palette…

2.輸入 ‘doctor’, 然后選擇 ‘Flutter: Run Flutter Doctor’ action

3.查看“OUTPUT”窗口中的輸出是否有問題

至此囊咏，我們的flutter的環(huán)境配置就全部完成了。

二.創(chuàng)建flutter項目

創(chuàng)建方式有2種：VSCode創(chuàng)建塔橡，終端命令行創(chuàng)建

2.1.使用VSCode創(chuàng)建flutter項目

1.啟動 VS Code

2.調(diào)用 View>Command Palette…

3.輸入 ‘flutter’, 然后選擇 ‘Flutter: New Project’ action

4.輸入 Project 名稱 (如myapp), 然后按回車鍵

5.指定放置項目的位置梅割，然后按藍色的確定按鈕

6.等待項目創(chuàng)建繼續(xù)，并顯示main.dart文件

2.2.使用命令行創(chuàng)建

$ flutter create myapp $ cd myapp

上述命令創(chuàng)建一個Flutter項目葛家，項目名為myapp户辞，其中包含一個使用Material 組件的簡單的演示應用程序。

在項目目錄中癞谒，您的應用程序的代碼位于 lib/main.dart.

三.運行flutter程序

3.1 使用命令行運行

沒有定位到你新建工程的根目錄下的需要先定位到工程根目錄

（這里需要至少打開一個模擬器或者連接一個有證書信任的真機再運行）

flutter run

這里需要注意的是：當你的mac打開了多個模擬器和連接的真機總數(shù)超過2個的時候底燎，會報錯:

More than one device connected; please specify a device with the '-d <deviceId>' flag, or use '-d all' to act on all devices.

**的 iPhone ? d3c6902e4742d3bb8e1e9bd89bdf79712348e190 ? ios ? iOS 12.3.1

iPhone 8 ? 0FC2177E-59C6-4640-984B-A6799A3F21F5 ? ios ? iOS 12.1 (simulator)

這時候我們需要選擇指定哪個設(shè)備去run：

flutter run -d 0FC2177E-59C6-4640-984B-A6799A3F21F5（這里我們指定模擬器iphone 8）

或者

flutter run -d all (運行所有已經(jīng)打開的設(shè)備)

3.2使用VSCode運行

1.確保在VS Code的右下角選擇了目標設(shè)備

2.按 fn+F5 鍵或調(diào)用Debug>Start Debugging

這里說個注意點：當你的工程不是通過VSCode創(chuàng)建的時候，你如果想通過vs run,可能你不知道flutter工程下哪個文件是vs打開的入口弹砚，（具體我也不知道双仍，囧??）這時候我們需要用不上打開整個flutter工程的文件夾，

file-->open-->選擇你工程的文件夾

打開工程之后桌吃，如果你直接按照前面的方法run朱沃，會彈如下框：

image1.png

因為vs不知道這段個工程是屬于什么環(huán)境，需要你選擇一個環(huán)境茅诱，咱們選擇第一個“Dart & Flutter”逗物，然后等待十秒鐘左右就起來了。

可能還有同學想問瑟俭，vs 想debug 的時候除了用按 fn+F5 鍵或調(diào)用Debug>Start Debugging外有沒有可視化的按鈕翎卓？

答案是有的，如圖：

image2.png

四.體驗熱重載

Flutter 可以通過熱重載（hot reload）實現(xiàn)快速的開發(fā)周期摆寄，熱重載就是無需重啟應用程序就能實時加載修改后的代碼失暴，并且不會丟失狀態(tài)（譯者語:如果是一個web開發(fā)者坯门，那么可以認為這和webpack的熱重載是一樣的）。簡單的對代碼進行更改逗扒，然后告訴IDE或命令行工具你需要重新加載（點擊reload按鈕）田盈，你就會在你的設(shè)備或模擬器上看到更改。

用你喜歡的編輯器打開文件lib/main.dart
將字符串

'You have pushed the button this many times:' 更改為

'You have clicked the button this many times:'

不要按“停止”按鈕; 讓您的應用繼續(xù)運行.
要查看您的更改缴阎，請調(diào)用 Save (cmd-s / ctrl-s), 或者點擊熱重載按鈕 (綠色圓形箭頭按鈕).

你會立即在運行的應用程序中看到更新的字符串

這里需要注意的是：使用熱重載功能能立馬看到你更改之后的效果，但是你更改之后的代碼并沒有被編譯到app中简软，意思就是蛮拔，如果你更改代碼，用熱重載之后痹升，你關(guān)掉應用建炫，下次你通過模擬器或者真機手動點擊打開應用的時候，你會發(fā)現(xiàn)你改的代碼并沒有生效疼蛾，也就是你改的代碼需要重新編譯一遍才能生效肛跌，不過你下次再通過vs或者命令行run的時候，就會變編譯進去了察郁。

本人也處于學習階段衍慎，以上屬于自己針對官方文檔做的一些個人總結(jié)，有不對之處歡迎指正皮钠。
學習鏈接：
Flutter中文網(wǎng)：https://flutterchina.club
Flutter社區(qū)中文資源：https://flutter-io.cn/#section-keynotes
Flutter視頻學習：https://classroom.udacity.com/courses/ud905