開發體驗初探

本頁面講解如何透過範本實現一個 Flutter 應用，執行並且在修改程式之後觸發“熱重載 (hot reload)”功能。

選擇你用於編寫、編譯、執行 Flutter 應用的開發環境吧。

建立應用

  1. 開啟 View > Command Palette。

  2. 輸入「flutter」，選擇 Flutter: New Project。

  3. 選擇 Application。

  4. 新建或選擇新專案將存放的上層目錄。

  5. 輸入專案名稱，例如 my_app，並點選 Enter。

  6. 等待專案建立完成，並且 main.dart 檔案展現在編輯器中。

該命令會建立一個名為 myapp，裡面包含一個簡單的範例程式，裡面用到了 Material 元件。

Run the app

  1. 定位到 VS Code 的狀態列（視窗底部的藍色欄）：
    status bar

  2. 從 Device Selector 區域選擇一個裝置。更多資訊，參考 快速切換用於 Flutter 的裝置。

    • 如果沒有可用的裝置，而同時你想使用模擬器，點選 No Devices 並點選 Start iOS Simulator 啟動一個模擬器。

    • 想要配置真機用於除錯，請檢視你正在使用的系統的對應 安裝 裝置指導。

  3. 執行 Run > Start Debugging 或按下 F5。

  4. 等待應用啟動——啟動進度會在 Debug Console 中展示。

當應用編譯完成後，就可以在裝置上執行這個起步應用了。

Starter app on iOS
Starter app

嘗試熱重載 (hot reload)

Flutter 透過 熱重載 提供快速開發週期，該功能支援應用程式在執行狀態下重載程式碼，無需重新啟動應用程式或者丟失程式執行狀態。修改一下程式碼，然後告訴 IDE 或者命令列工具你需要熱重載，然後看一下模擬器或者裝置上應用的變化。

  1. 開啟 lib/main.dart。

  2. 修改字串

    'You have pushed the button this many times'

    改為

    'You have clicked the button this many times'

  3. 儲存修改: invoke Save All, or click Hot Reload lightning bolt .

你會發現修改後的字串幾乎馬上出現在正在執行的應用程式上。

以 profile 模式執行

截止目前文件所示內容，你的應用應該執行在除錯 (debug) 模式中，這個模式意味著在更大的效能開銷下實現了更快速的開發效率，比如熱重載功能的啟用，因此你可能要面臨較差品質的動畫效果。當你準備分析應用效能或要打包釋出的時候，你可能需要 Flutter 的 profile 或者 release 建構，相關文件，請查閱文件： Flutter 的建構模式選擇。

建立應用

  1. 開啟 IDE 並選中 New Flutter Project。

  2. 選擇 Flutter，驗證 Flutter SDK 的路徑。完成後選擇 Next。

  3. 輸入專案名稱（例如 my_app）。

  4. 選擇 Application 的專案型別，完成後選擇 Next。

  5. 點選 完成。

  6. 等待 Android Studio 完成專案的建立。

上述步驟會建立名為 my_app 的 Flutter 專案的資料夾，它是一個使用了 Material 元件 的簡單 demo。

執行應用

  1. 定位到 Android Studio 的工具欄：
    Main IntelliJ toolbar

  2. 在 target selector 中，選擇一個用於執行應用的 Android 裝置。如果列表為空，選擇 Tools > AVD Manager 建立一個虛擬機器。更多細節可以參考 管理 AVD 虛擬機器。

  3. 點選工具欄中的執行按鈕，或者點選選單欄中的 Run > Run。

當應用編譯完成後，就可以在裝置上執行這個起步應用了。

Starter app on iOS
Starter app

嘗試熱重載 (hot reload)

Flutter 透過 熱重載 提供快速開發週期，該功能支援應用程式在執行狀態下重載程式碼，無需重新啟動應用程式或者丟失程式執行狀態。修改一下程式碼，然後告訴 IDE 或者命令列工具你需要熱重載，然後看一下模擬器或者裝置上應用的變化。

  1. 開啟 lib/main.dart。

  2. 修改字串

    'You have pushed the button this many times'

    改為

    'You have clicked the button this many times'

  3. 儲存修改: invoke Save All, or click Hot Reload lightning bolt .

你會發現修改後的字串幾乎馬上出現在正在執行的應用程式上。

以 profile 模式執行

截止目前文件所示內容，你的應用應該執行在除錯 (debug) 模式中，這個模式意味著在更大的效能開銷下實現了更快速的開發效率，比如熱重載功能的啟用，因此你可能要面臨較差品質的動畫效果。當你準備分析應用效能或要打包釋出的時候，你可能需要 Flutter 的 profile 或者 release 建構，相關文件，請查閱文件： Flutter 的建構模式選擇。

建立應用

使用 flutter create 命令來建立新的工程：

$ flutter create my_app
$ cd my_app

你可以在執行 flutter create 時傳遞其他引數，例如專案名 (pubspec.yaml)、組織名或者指定原生平台使用的語言：

$ flutter create --project-name my_app --org dev.flutter --android-language java --ios-language objc my_app
$ cd my_app

該命令會建立一個名為 myapp，裡面包含一個簡單的範例應用，裡面用到了 Material 元件。

執行應用

  1. 檢查一下 Android 裝置是否已經正常執行。如果應用未顯示，請在 安裝 頁面裡，根據你的作業系統按照裝置相關說明進行操作。

    $ flutter devices

  2. 使用下面指令執行應用：

   $ flutter run

  1. 在命令列視窗輸入 r

當應用編譯完成後，就可以在裝置上執行這個起步應用了。

Starter app on iOS
Starter app

嘗試熱重載 (hot reload)

Flutter 透過 熱重載 提供快速開發週期，該功能支援應用程式在執行狀態下重載程式碼，無需重新啟動應用程式或者丟失程式執行狀態。修改一下程式碼，然後告訴 IDE 或者命令列工具你需要熱重載，然後看一下模擬器或者裝置上應用的變化。

  1. 開啟 lib/main.dart。

  2. 修改字串

    'You have pushed the button this many times'

    改為

    'You have clicked the button this many times'

  3. 儲存修改.

你會發現修改後的字串幾乎馬上出現在正在執行的應用程式上。

以 profile 模式執行

截止目前文件所示內容，你的應用應該執行在除錯 (debug) 模式中，這個模式意味著在更大的效能開銷下實現了更快速的開發效率，比如熱重載功能的啟用，因此你可能要面臨較差品質的動畫效果。當你準備分析應用效能或要打包釋出的時候，你可能需要 Flutter 的 profile 或者 release 建構，相關文件，請查閱文件： Flutter 的建構模式選擇。