[Flutter]啓動:調試運行

本頁介紹如何「調試運行」Flutter:從咱們提供的模板建立一個新的Flutter應用程序,運行它,並學習如何使用Hot Reload(熱重載)進行更改。html

Flutter是一個靈活的工具包,因此請首先選擇您的開發工具來編寫,構建和運行您的Flutter應用程序。android


Android Studio

Android Studio:爲Flutter提供完整的集成IDE體驗。bash

建立新的應用程序

  1. 選擇File > New Flutter Project
  2. 選擇Flutter application做爲項目類型,而後選擇下一步
  3. 輸入項目名稱(如:myapp),而後選擇下一步
  4. 點擊Finish
  5. 等待Android Studio安裝SDK,並建立項目工程。

上述命令建立了一個名爲myapp的Flutter項目目錄,其中包含一個使用Material Components的簡單應用程序示例。app

在項目目錄中,你的應用程序的代碼在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,而後在模擬器、仿真器或設備中就能夠看到你的更改。ide

  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下。ui

運行應用程序

  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

相關文章
相關標籤/搜索