[Flutter]啟動:除錯執行

GarLin發表於2018-03-06

本頁介紹如何“除錯執行”Flutter:從我們提供的模板建立一個新的Flutter應用程式,執行它,並學習如何使用Hot Reload(熱過載)進行更改。

Flutter是一個靈活的工具包,所以請首先選擇您的開發工具來編寫,構建和執行您的Flutter應用程式。


Android Studio

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

建立新的應用程式

  1. 選擇File > New Flutter Project
  2. 選擇Flutter application作為專案型別,然後選擇下一步
  3. 輸入專案名稱(如:myapp),然後選擇下一步
  4. 點選Finish
  5. 等待Android Studio安裝SDK,並建立專案工程。

上述命令建立了一個名為myapp的Flutter專案目錄,其中包含一個使用Material Components的簡單應用程式示例。

在專案目錄中,你的應用程式的程式碼在lib/main.dart下。

執行應用程式

  1. 找到主要的Android Studio工具欄:

Android Studio工具欄

  1. target selector中選擇一個Android裝置來執行應用程式。如果沒有列出可用的,可以在Tools>Android>AVD Manager中建立一個。更多資訊,檢視管理 AVD
  2. 在工具欄中點選執行圖示,或者選擇選單中的Run > Run
  3. 如果一切正常,您應該在您的裝置或模擬器上看到您的第一個應用程式:

第一個應用程式

嘗試hot reload

Flutter基於hot reload提供了一個非常快速的開發週期,可在實時執行的應用中重新載入程式碼而無需重新啟動而導致丟失應用狀態。只需對原始碼進行更改,然後告訴你的編輯器或命令列工具你需要hot reload,然後在模擬器、模擬器或裝置中就可以看到你的更改。

  1. 將字串'You have pushed the button this many times:'更改為'You have clicked the button this many times:'
  2. 不要按“停止”按鈕,請讓你的應用繼續執行。
  3. 想要檢視你的更改,請保存所有檔案cmd-s / ctrl-s),或者點選Hot Reload 按鈕(帶有閃電圖示的按鈕)。

您在執行的應用程式中應該幾乎立即看到字串的更新。


VS Code

VS Code:輕量級編輯器,支援Flutter執行和除錯。

建立新的應用程式

  1. 啟動VS Code
  2. 呼叫View>Command Palette…
  3. 輸入“flutter”,然後選擇“Flutter: New Project”執行
  4. 輸入一個專案名稱(例如:myapp),然後按下Enter鍵
  5. 指定放置專案的位置,然後選擇藍色的確認按鈕
  6. 等待專案建立,並顯示main.dart檔案

上述命令建立了一個名為myapp的Flutter專案目錄,其中包含一個使用Material Components的簡單應用程式示例。

在專案目錄中,你的應用程式的程式碼在lib/main.dart下。

執行應用程式

  1. 確保在VS Code的右下角選擇了目標裝置
  2. 按下鍵盤上的F5按鈕,或者呼叫Debug>Start Debugging
  3. 等到應用載入啟動
  4. 如果一切正常,在應用程式建成後,您應該在您的裝置或模擬器上看到您的第一個應用程式:

第一個應用程式

嘗試hot reload

Flutter基於hot reload提供了一個非常快速的開發週期,可在實時執行的應用中重新載入程式碼而無需重新啟動而導致丟失應用狀態。只需對原始碼進行更改,然後告訴你的編輯器或命令列工具你需要hot reload,然後在模擬器、模擬器或裝置中就可以看到你的更改。

  1. 在您最喜歡的Dart程式碼編輯器中開啟檔案lib/main.dart
  2. 將字串'You have pushed the button this many times:'更改為'You have clicked the button this many times:'
  3. 不要按“停止”按鈕,請讓你的應用繼續執行。
  4. 想要檢視你的更改,請保存所有檔案cmd-s / ctrl-s),或者點選Hot Reload 按鈕(綠色的圓形箭頭按鈕)。

您在執行的應用程式中應該幾乎立即看到字串的更新。


Terminal + editor

Terminal + editor:Your editor-of-choice combined with Flutter’s terminal tool for running and building.

建立新的應用程式

  1. 使用flutter create命令建立一個新的專案:
$ flutter create myapp
$ cd myapp
複製程式碼

上述命令建立了一個名為myapp的Flutter專案目錄,其中包含一個使用Material Components的簡單應用程式示例。

在專案目錄中,你的應用程式的程式碼在lib/main.dart下。

執行應用程式

  • 檢查是否有一個Android裝置正在執行中。如果沒有顯示,請檢視設定
$ flutter devices
複製程式碼
  • 使用flutter run命令執行應用程式:
$ flutter run
複製程式碼
  • 如果一切正常,在應用程式建成後,您應該在您的裝置或模擬器上看到您的第一個應用程式:

第一個應用程式

嘗試hot reload

Flutter基於hot reload提供了一個非常快速的開發週期,可在實時執行的應用中重新載入程式碼而無需重新啟動而導致丟失應用狀態。只需對原始碼進行更改,然後告訴你的編輯器或命令列工具你需要hot reload,然後在模擬器、模擬器或裝置中就可以看到你的更改。

  1. 開啟lib/main.dart檔案
  2. 將字串'You have pushed the button this many times:'更改為'You have clicked the button this many times:'
  3. 不要按“停止”按鈕,請讓你的應用繼續執行。
  4. 想要檢視你的更改,請保存所有檔案cmd-s / ctrl-s),或者點選Hot Reload 按鈕(帶有閃電圖示的按鈕鈕)。

您在執行的應用程式中應該幾乎立即看到字串的更新。


Next

相關文章