笙亿网络策划

Flutter 开发工具有哪些？怎么用开发工具高效开发 Flutter App？

约 5 分钟读完 9 阅
文章导读
Previous Quiz Next 本章详细介绍了 Flutter 开发工具。跨平台开发工具包的首个稳定版本于 2018 年 12 月 4 日发布，即 Flutter 1.0。Google 持续致力于改进并通过各种开发工具加强 Flutter 框架。
📋 目录
  1. 一 Widget Sets
  2. 二 使用 Visual Studio Code 进行 Flutter 开发
  3. 三 Dart DevTools
  4. 四 Flutter SDK
A A

Flutter - 开发工具

Previous
Quiz
Next

本章详细介绍了 Flutter 开发工具。跨平台开发工具包的首个稳定版本于 2018 年 12 月 4 日发布，即 Flutter 1.0。Google 持续致力于改进并通过各种开发工具加强 Flutter 框架。

Widget Sets

Google 更新了 Material 和 Cupertino widget sets，以在组件设计中提供像素级完美的质量。即将发布的 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 来编写代码并安装插件。Google 的开发团队一直在开发另一种开发工具，名为 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

现在在浏览器中访问以下 URL，以启动 DevTools −

http://localhost:9100/?port=9200

您将收到如下所示的响应 −

Dart Dev Tools

Flutter SDK

要更新 Flutter SDK，请使用以下命令 −

flutter upgrade

您可以看到如下所示的输出 −

Flutter SDK

要升级 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".

现在转到 URL http://127.0.0.1:50399/，您可以看到以下结果 −

Result