1.5 創建第一個Flutter應用Hello World

本節介紹如何創建一個Flutter工程，并將它運行起來。

Flutter工程可以通過多種方式進行創建與運行。如在Android Studio中可通過IDE的界面操作，在Visual Studio Code下可通過命令和界面操作，除了GUI工具外，也直接使用flut-ter命令進行操作。本節介紹Android Studio操作方式，其他方式可參考對應的插件和命令文檔。

1.5.1 如何創建Flutter工程

打開Android Studio，在歡迎界面中選擇Start a new Flutter Project，或者在IDE的主界面中選擇File菜單→New選項→New Flutter Project選項，彈出Create New Flutter Project窗口，如圖1-19所示。

Flutter工程包含多種類型，分別介紹如下。

? Flutter Application：純Flutter應用，應用的主體為Flutter實現。在本書的示例中均采用這種類型。

? Flutter Plugin： Flutter插件，將原生能力通過封裝后導出給Flutter側，通常包含An-droid、iOS兩端原生代碼，以及Dart封裝代碼。

? Flutter Package：另一種擴展方式，只包含純Dart代碼，不含原生代碼。通常為基于Dart標準庫的功能擴展，或對Flutter Dart框架的功能擴展。

? Flutter Module： Flutter模塊，用于混合開發，指的是在現有Android、iOS應用中集成Flutter能力，實現原生業務與Flutter業務并存。這是目前業界實際業務中最常用的工程形態。

下面以Flutter Application為例，選中它單擊Next按鈕來到工程名稱與路徑配置界面，其中需要填寫項目名稱，設置Flutter SDK路徑及項目的存放路徑，在Description中可為項目編寫一段簡短的介紹，具體如圖1-20所示。

在圖1-20中有一個Create project offline選項，默認為未勾選狀態，此時創建新工程時會聯網拉取最新數據。如果網絡不通，會導致IDE卡在這一步，遇到這個問題，可在這一步勾選Create project offline選項，這樣創建項目時會跳過聯網拉取。

再次單擊Next按鈕，出現一個新的配置頁面，在其中填寫包名，包名是應用的唯一標識，需要具備唯一性。之后還有幾個勾選項，分別用于選擇Android下是否啟用androidx、Android下是否啟用Kotlin，以及iOS下是否啟用Swift。如果讀者不知道這些選項的具體含義，采用默認的勾選狀態即可。具體如圖1-21所示。

單擊Finish按鈕便開始創建工程，需等待一段時間，之后可看到創建好的工程，工程的入口文件為main.dart，Flutter SDK默認會生成一個簡單的計數器代碼項目。關于工程結構及代碼的含義將在后續小節中進行詳細介紹，在本節中重點是先將其運行起來。在IDE中執行flutter pub get，或者打開Terminal在終端中執行這段命令獲取依賴。依賴加載完成后，IDE的整體效果如圖1-22所示。

1.5.2 配置Android模擬器與真機運行

工程創建完成后，接下來的目標是在不同的設備上將它運行起來。在本節中介紹Android模擬器的運行方式。Android Studio中自帶模擬器功能，在開發階段使用模擬器調試非常方便、好用。

創建模擬器的方法為，在工具欄或者在Tools菜單下單擊AVD Manager選項，會彈出如圖1-23所示的模擬器創建窗口。

單擊Create Virtual Device按鈕后會進入機型選擇頁面，在這個頁面中可以選擇模擬設備的機型與屏幕大小等。選擇Pixel 2設備，單擊next按鈕。接下來進入系統鏡像選擇頁面，選擇ABI為x86的R版本系統。需要說明的是，鏡像的ABI分為x86和ARM兩種，建議選擇x86鏡像，x86具備更快的運行速度。再次單擊next按鈕，進入設備配置確認頁，直接單擊Finish按鈕完成。此時模擬器列表中會出現剛剛添加的模擬器，如圖1-24所示。

需要注意的是，運行模擬器需要安裝Intel x86 Emulator Accelerator（HAXM installer），這是一個用于提升模擬器運行效率的工具。如果AVD Manager未提示安裝，需要手動打開SDK Manager在SDK Tools一欄中進行勾選安裝。

單擊Actions列的運行按鈕，啟動虛擬機，會彈出一個運行Android系統的窗口。回到IDE，在工具欄中單擊運行按鈕運行工程，待編譯完成后程序會運行在模擬器中，如圖1-25所示。

雖然模擬器非常方便好用，但是在很多場景下無法替代真機，經常需要將應用安裝到設備上進行調試。在本節中介紹如何讓Flutter應用在Android真機上運行。

首先準備一臺Android設備，打開它的開發者選項。不同品牌機型的開發者選項開啟方式有所區別，讀者可根據自己的機型自行查閱。在手機上進入開發者選項，開啟“USB調試”，這樣IDE就可以通過adb與手機通信了，如圖1-26所示。

此時IDE中已經可以看到連接手機的型號，如圖1-27所示。再次單擊運行按鈕，示例工程將會在手機中運行。

1.5.3 配置iOS模擬器與真機運行

Flutter開發iOS應用需要在蘋果的macOS環境下進行構建，在macOS下安裝XCode，并在XCode中創建虛擬機，具體配置方式可查閱iOS開發環境搭建教程，這里不再贅述。建議安裝完XCode環境后，使用flutter doctor命令檢查一下是否安裝成功。

在macOS下使用Android Studio打開Flutter工程，在設備選擇下拉框中選擇Open iOS Simulator，這會啟動iOS模擬器，如圖1-28所示。

待模擬器打開后，會看到設備名稱已經切換為模擬器設備。此時單擊工具欄上的運行按鈕，等待編譯完成后示例工程便運行在了模擬器中，如圖1-29所示。

iOS真機運行需要有蘋果開發者賬號，或者個人Apple ID。但Apple ID只能用于個人開發學習，構建出的應用無法上架AppStore，同時對安裝應用的真機數量也有限制。

配置iOS真機運行首先需要在XCode中登錄賬號，將iOS設備連接到蘋果計算機上。來到項目工程所在目錄，使用XCode打開ios/Runner.xcworkspace，在左側的導航區單擊根節點Runner進入工程配置，在打開的Tab分頁標簽中單擊Signing&CapabilitiesTab選項，此時需要綁定Apple ID。登錄完成后，選中真實設備即可運行。