Flutter - 開發工具

本章詳細解釋了 Flutter 開發工具。這個跨平臺開發工具包的第一個穩定版本於 2018 年 12 月 4 日釋出，名為 Flutter 1.0。谷歌一直在不斷改進和加強 Flutter 框架，並提供不同的開發工具。

Widget 集

Google 更新了 Material 和 Cupertino widget 集，為元件設計提供畫素級完美的質量。即將釋出的 Flutter 1.2 版本將設計為支援桌面鍵盤事件和滑鼠懸停支援。

使用 Visual Studio Code 進行 Flutter 開發

Visual Studio Code 支援 Flutter 開發，並提供大量的快捷鍵以實現快速高效的開發。下面列出了 Visual Studio Code 為 Flutter 開發提供的一些關鍵功能：

程式碼輔助 - 當您想檢查選項時，可以使用 **Ctrl+Space** 獲取程式碼完成選項列表。
快速修復 - **Ctrl+.** 是一個快速修復工具，可以幫助修復程式碼。
編碼時的快捷鍵。
在註釋中提供詳細的文件。
除錯快捷鍵。
熱重啟。

Dart DevTools

我們可以使用 Android Studio 或 Visual Studio Code 或任何其他 IDE 來編寫程式碼並安裝外掛。谷歌的開發團隊一直在開發另一個名為 Dart DevTools 的開發工具，它是一個基於 Web 的程式設計套件。它支援 Android 和 iOS 平臺。它基於時間線檢視，因此開發人員可以輕鬆分析其應用程式。

安裝 DevTools

要在控制檯中安裝 DevTools，請執行以下命令：

flutter packages pub global activate devtools

現在您可以看到以下輸出：

Resolving dependencies... 
+ args 1.5.1 
+ async 2.2.0
+ charcode 1.1.2 
+ codemirror 0.5.3+5.44.0 
+ collection 1.14.11 
+ convert 2.1.1 
+ devtools 0.0.16 
+ devtools_server 0.0.2 
+ http 0.12.0+2 
+ http_parser 3.1.3 
+ intl 0.15.8 
+ js 0.6.1+1 
+ meta 1.1.7 
+ mime 0.9.6+2 
.................. 
.................. 
Installed executable devtools. 
Activated devtools 0.0.16.

執行伺服器

您可以使用以下命令執行 DevTools 伺服器：

flutter packages pub global run devtools

現在，您將得到類似於此的響應：

Serving DevTools at http://127.0.0.1:9100

啟動您的應用程式

轉到您的應用程式，開啟模擬器並使用以下命令執行：

flutter run --observatory-port=9200

現在，您已連線到 DevTools。

在瀏覽器中啟動 DevTools

現在在瀏覽器中訪問以下網址以啟動 DevTools：

https://:9100/?port=9200

您將得到如下所示的響應：

Flutter SDK

要更新 Flutter SDK，請使用以下命令：

flutter upgrade

您可以看到如下所示的輸出：

要升級 Flutter 包，請使用以下命令：

flutter packages upgrade

您可能會看到以下響應：

Running "flutter packages upgrade" in my_app... 7.4s

Flutter Inspector

它用於瀏覽 Flutter widget 樹。為此，請在控制檯中執行以下命令：

flutter run --track-widget-creation

您可以看到如下所示的輸出：

Launching lib/main.dart on iPhone X in debug mode... 
─Assembling Flutter resources...                       3.6s 
Compiling, linking and signing...                      6.8s 
Xcode build done.                                     14.2s 
2,904ms (!)
To hot reload changes while running, press "r". To hot restart (and rebuild state), press "R". 
An Observatory debugger and profiler on iPhone X is available at: http://127.0.0.1:50399/ 
For a more detailed help message, press "h". To detach, press "d"; to quit, press "q".

現在轉到網址 http://127.0.0.1:50399/，您可以看到以下結果：

列印頁面