没有各种工具的帮助,构建Flutter应用是不可能成功的。在开发过程中,我们可能需要使用DartSDK、FlutterSDK和IDEs中的工具。善用这些工具可以提高你的生产力。本章涵盖了DartSDK、FlutterSDK、AndroidStudio和VSCode工具的使用。
你想知道一个正在运行的Flutterapp的内部情况。
使用DartSDK提供的Dart天文台。
DartObservatory是DartSDK提供的工具,用于分析和调试Dart应用。由于Flutter应用也是Dart应用,所以Observatory也可以用于Flutter应用。Observatory是调试、跟踪和分析Flutter应用的重要工具。天文台允许你
当使用flutterrun启动Flutterapp时,Observatory也会启动并等待连接。您可以指定Observatory监听的端口,或者让它默认监听一个随机端口。您可以在命令输出中看到访问天文台的URL。在浏览器中导航到网址,就可以看到天文台的UI。
为了获得最佳效果,建议在使用天文台时使用谷歌浏览器。其他浏览器可能无法正常工作。
图2-1
灾难援助反应队天文台的虚拟机信息
图2-2
在Dart天文台隔离信息
当开发Flutter应用时,在您进行了一些代码更改后,您希望快速看到结果。
使用FlutterSDK提供的热重装和热重启。
FlutterSDK提供的热重载是一个杀手级特性,可以显著提高开发人员的工作效率。使用热重新加载,应用更新之间的状态是反常的,因此您可以立即看到UI更新,并从您进行更改的最后一个执行点继续开发和测试。
根据Flutter应用的启动方式,有不同的方式来触发热重装。只有调试模式下的Flutter应用可以热重装:
图2-3
热重装输出
热重新加载非常有用,您可能希望它对您所做的所有代码更改都可用。不幸的是,仍有一些情况下热重装可能不起作用:
如果热重新加载不起作用,您仍然可以使用热重启,这将从头重新启动应用。您可以确保热重启将反映您所做的所有更改。根据Flutter应用的启动方式,触发热重启有不同的方式:
您希望让FlutterSDK保持最新,以获得最新的特性、错误修复和性能改进。
跟踪不同的FlutterSDK通道并升级SDK。
图2-4
命令的输出flutterchannel
表2-1
FlutterSDK通道
|
引导
描述
||---|---||stable|稳定构建的渠道。这是产品开发的推荐渠道。||beta|上个月最佳构建频道。||dev|最新全面测试版本的通道。在此通道中运行的测试比master多。||master|积极开发最新变化的渠道。如果您想尝试最新的功能,这是要跟踪的频道。这个通道中的代码通常工作正常,但有时可能会意外中断。使用本频道风险自担。|
我们可以使用命令flutterchannel[
$flutterchannelmaster$flutterupgrade2.4在AndroidStudio中调试Flutter应用问题您正在使用AndroidStudio开发Flutter应用,并希望找出代码无法按您预期的方式运行的原因。
使用AndroidStudio内置的Flutter调试支持。
调试是开发人员日常工作的重要组成部分。调试时,我们可以在运行时看到实际的代码执行路径,并检查变量值。如果您有使用其他编程语言的经验,您应该已经具备了基本的调试技能。
图2-5
单击调试图标开始调试
图2-6
AndroidStudio中的框架视图
图2-7
AndroidStudio中的变量视图
图2-8
AndroidStudio中的控制台视图
你希望看到Flutter应用的轮廓,以便清楚地了解小部件是如何组织的。
在AndroidStudio中使用FlutterOutline视图。
图2-9
AndroidStudio中的Flutter轮廓视图
FlutterOutline视图中的工具栏有不同的操作来管理小部件。例如,中心小部件按钮用一个Center小部件包装当前小部件。
您正在使用VS代码开发Flutter应用,并且想要找出为什么代码没有按照您预期的方式工作。
使用VS代码中内置的Flutter调试支持。
在VS代码中,你可以点击编辑器中某一行的左边来添加断点。使用菜单调试开始调试在调试模式下启动应用。
顶部的操作栏包含的操作包括继续、单步执行、单步执行、单步执行、重新启动和停止。
图2-10
在VS代码中调试
您想要创建不同类型的Flutter项目。
使用带有不同参数的命令fluttercreate。
fluttercreate是FlutterSDK提供的创建Flutter项目的命令。在菜谱1-10中,我们使用这个命令来创建一个简单的Flutter应用。在配方1-11中,我们还看到了Android提供的向导来创建新的Flutter项目,它允许对已创建的项目进行定制。在引擎盖下,AndroidStudio也使用了fluttercreate命令。该命令支持不同场景的不同参数。以下代码是fluttercreate的基本用法。输出目录将包含新项目的文件。
表2-2
Flutter项目类型
项目类型
||---|---||app|Flutter应用。这是默认类型。||package|一个包含模块化Dart代码的可共享的Flutter项目。||plugin|一个可共享的Flutter项目,包含Android和iOS平台特定的代码。|
下面的命令显示了如何创建一个Flutter包和插件。
$fluttercreate-tpackagemy_package$fluttercreate-tpluginmy_plugin在创建插件的时候,我们也可以使用参数-i或者--ios-language来指定iOS代码的编程语言。Objective-C的可能值为objc,Swift的可能值为swift。默认值为objc。对于Android代码,我们可以用自变量-a或者--android-language来指定Android代码的编程语言。可能的值是Java的java和Kotlin的kotlin。默认值为java。以下命令显示了如何使用SwiftforiOS和KotlinforAndroid创建一个Flutter插件。
表2-3
Flutter项目配置
争吵
缺省值
||---|---|---||--project-name|这个新的Flutter项目的名称。该名称必须是有效的dart包名称。|从输出目录名派生||--org|这个新的Flutter项目的组织名称。该值应该采用反向域表示法,例如,com.example。该值用作Android代码的Java包名和iOS包标识符中的前缀。|com.example||--description|这个新Flutter项目的描述。|新的Flutter项目|
表2-4
fluttercreate的特点
争论
||---|---|---||--overwrite/--no-overwrite|是否覆盖现有文件。|离开||--pub/--no-pub|项目创建后是否运行flutterpackagesget。|在||--offline/--no-offline|是否在离线模式下运行flutterpackagesget。仅在--pub开启时适用。|离开||--with-driver-test/--no-with-driver-test|是否添加flutter_driver依赖,生成样本Flutter驱动测试。|离开|
你想运行Flutter应用。
使用带有不同参数的命令flutterrun。
flutterrun是FlutterSDK提供的启动Flutterapps的命令。flutterrun针对不同的使用场景有很多说法。
表2-5
构建Flutter运行的风味
||---|---||--debug|调试版本。这是默认的构建风格。||--profile|专门用于性能分析的版本。此选项目前不支持模拟器目标。||--release|准备发布到appstore的发布版本。||--flavor|由特定于平台的构建设置定义的自定义应用风格。这需要在AndroidGradle脚本和自定义Xcode方案中使用产品风格。|
参数-t或--target指定应用的主入口点文件。它必须是一个包含main()方法的Dart文件。默认值为lib/main.dart。下面的命令使用lib/app.dart作为入口点文件。
$flutterrun-tlib/app.dart如果您的应用有不同的路线,请使用参数--route来指定运行应用时要加载的路线。
如果你想记录正在运行的Flutterapp的进程id,使用参数--pid-file指定文件来写进程id。有了进程id,您可以发送信号SIGUSR1来触发热重装,发送信号SIGUSR2来触发热重启。在下面的命令中,进程id被写入文件~/app.pid。
$flutterrun--pid-file~/app.pid现在我们可以使用kill向正在运行的Flutterapp发送信号。
表2-6
flutterrun的额外参数
||---|---|---||--hot/--not-hot|是否应启用热重装。|在||--build/--no-build|在运行应用之前,是否应该构建它。|在||--pub/--no-pub|是否先运行flutterpackagesget再运行。|在||--target-platform|为Android设备构建应用时,指定目标平台。可能的值有default、android-arm和android-arm64。|default||--observatory-port|指定观察站调试器连接的端口。|0(随机自由港)||--start-paused|让应用以暂停模式启动,并等待调试器连接。|||--trace-startup|开始追踪。|||--enable-software-rendering|使用Skia启用渲染。|||--skia-deterministic-rendering|与--enable-software-rendering一起使用时,提供100%确定性Skia渲染。|||--trace-skia|启用Skia代码跟踪。||
图2-11
Flutter运行命令的输出
你想为Android和iOS平台构建应用二进制文件。
使用命令flutterbuild。
为了将Flutter应用部署到设备上并发布到应用商店,我们需要为Android和iOS平台构建二进制文件。命令flutterbuild支持构建这些二进制文件。
表2-7
Flutter生成参数apk
||---|---||--debug|构建调试版本。||--profile|构建一个专门用于性能分析的版本。||--release|构建发布版本,准备发布到appstore。||--flavor|构建由特定于平台的构建设置定义的自定义应用风格。这需要在AndroidGradle脚本和自定义Xcode方案中使用产品风格。||--pub/--no-pub|构建app前是否运行flutterpackagesget。||--build-number=|一个整数,用于指定递增的内部版本号。对于每个版本,该值必须是唯一的。该值被用作“versionCode”。||--build-name=|格式为x.y.z的字符串版本号。该值被用作“versionName”。||--build-shared-library|编译成a∫。所以归档吧。||--target-platform|目标平台。可能的值是android-arm和android-arm64。|
建立APK文件时,--release是默认模式。下面的命令构建了一个发布版本,版本号为5,版本名为0.1.0。
$flutterbuildapk--build-number=5--build-name=0.1.0为iOS构建命令flutterbuildios构建iOS应用捆绑包。该命令的参数--debug、--profile、--release、--flavor、--pub、--no-pub、--build-number和--build-version与flutterbuildapk相同。--build-number的值作为CFBundleVersion,而--build-name的值作为CFBundleShortVersionString。
表2-8
颤动构建ios的额外参数
||---|---||--simulator|为iOS模拟器创建一个版本。||--no-simulator|为iOS设备构建一个版本。||--codesign/--no-codesign|是否对应用包进行签名。默认值为--codesign。|
默认情况下,flutterbuildios为设备构建app,即使用--no-simulator。以下命令为模拟器构建了一个调试版本,但没有对应用包进行签名。
$flutterbuildios--debug--no-codesign--simulator2.10安装Flutter应用问题你想把Flutter应用安装到模拟器或者设备上。
使用命令flutterinstall。
命令flutterinstall将当前的Flutter应用安装到仿真器或设备上。要安装该应用,您需要至少启动一个模拟器或连接一个设备。在安装应用之前,目标仿真器或设备应该有一个可用的二进制文件。首先使用flutterbuild构建二进制文件。
以下命令安装构建的二进制文件。
$flutterinstall2.11管理包问题你想要管理Flutter应用的依赖关系。
使用命令flutterpackages。
表2-9
包管理工具
平台
描述文件
工具
||---|---|---||Node.js|package.json|新公共管理故事||镖摆动|pubspec.yaml|pub``flutterpackages||爪哇|pom.xml``build.gradle|专家格拉德尔||红宝石|Gemfile|大错|
命令flutterpackagesget下载Flutter项目中的依赖包。命令flutterpackagesupgrade升级一个Flutter项目中的包。这两个命令简单地围绕Dart的底层pub工具。我们也可以使用flutterpackagespub直接调用Dartpub工具。命令flutterpackages不能做太多,因为它提供的功能有限。您可以随时使用flutterpackagespub将任务委派给Dartpub工具。
你应该使用flutterpackagesget和flutterpackagesupgrade来管理Flutter应用的依赖关系。不应使用Dartpub工具中的命令pubget和pubupgrade。如果您需要Dartpub工具的更多功能,请使用flutterpackagespub。
命令flutterpackagestest与pubruntest相同,但与fluttertest不同。由flutterpackagestest运行的测试托管在一个纯Dart环境中,所以像dart:ui这样的库是不可用的。这使得测试运行得更快。如果您正在构建不依赖于FlutterSDK中任何包的库,您应该使用这个命令来运行测试。
您已经为Flutter应用编写了测试,并且您想要确保这些测试通过。
使用命令fluttertest。
测试是可维护软件项目的重要组成部分。你应该对Flutter应用进行测试。命令fluttertest运行Flutter应用的测试。运行该命令时,您可以提供一个以空格分隔的相对文件路径列表,以指定要运行的测试文件。如果没有提供文件,则包含test目录中文件名以_test.dart结尾的所有文件。下面的命令运行测试文件test/mytest.dart。
$fluttertesttest/mytest.dart筛选要运行的测试参数--name指定正则表达式来匹配要运行的测试的名称。一个测试文件可以包含多个测试。如果只需要做简单的子串匹配,就用--plain-name代替。以下命令显示了--name和--plain-name的用法。
$fluttertest--name="smoke\d+"$fluttertest--plain-name=smoke您可以使用--name和--plain-name指定多个匹配条件。要运行的测试需要匹配所有给定的条件。以下命令同时使用了--name和--plain-name。
$fluttertest--name="smoke.*"--plain-name=test测试覆盖率如果你想知道你的测试的覆盖范围,使用参数--coverage。测试结束后,fluttertest生成测试覆盖信息并保存到文件coverage/lcov.info中。可以使用参数--coverage-path指定覆盖信息的输出路径。如果你有基本的覆盖率数据,你可以把它放入路径coverage/lcov.base.info并传递参数--merge-coverage到fluttertest,然后FlutterSDK会使用lcov合并这两个覆盖率文件。
要查看覆盖率报告,您需要安装lcov。在macOS上,可以使用自制软件安装lcov。
$brewinstalllcov命令genhtml从lcov覆盖信息文件生成HTML文件。以下命令生成HTML覆盖率报告。打开生成的文件index.html查看报告。
$genhtmlcoverage/lcov.info--output-directorycoverage_report调试测试如果你想调试一个测试文件,你可以使用参数--start-paused。这种模式下只允许一个测试文件。执行会暂停,直到连接了调试器。以下命令调试文件test/simple.dart。
表2-10
fluttertest的额外参数
||---|---|---||--j,--concurrency|要运行的并发测试的数量。|6||--pub/--no-pub|是否在运行测试之前运行flutterpackagesget。|在|
您的Flutter代码编译成功,并且在测试中看起来不错。但是,您想知道在您的代码中是否有任何潜在的错误或不良的代码实践。
使用命令flutteranalyze。
命令flutteranalyze接受目录列表来扫描Dart文件。如果没有提供路径,flutteranalyze只分析当前工作目录。以下命令分析目录~/my_app/lib。
$flutteranalyze~/my_app/lib分析结果可以用参数--write写入文件。默认情况下,结果会写入控制台。您还可以传递参数--watch让分析器观察文件系统的变化,并连续运行分析。
表2-11
flutteranalyze的额外参数
||---|---|---||--current-package/--no-current-package|是否分析当前项目。如果--no-current-package被启用并且没有指定目录,那么将不进行任何分析。|在||--pub/--no-pub|运行分析前是否运行flutterpackagesget。|在||--preamble/--no-preamble|是否显示正在分析的当前文件。|在||--congratulate/--no-congratulate|是否在没有错误、警告、提示或lints的情况下显示输出。|在||--watch|持续监视文件系统的变化,并运行分析作为响应。||
命令flutteranalyze将代码分析委托给Dartdartanalyzer工具。我们可以使用项目根目录中的文件analysis_options.yaml来定制分析行为。
图2-12
Flutter分析命令的输出
您希望管理FlutterSDK使用的不同模拟器。
使用命令flutteremulators。
在为FlutterSDK设置Android和iOS平台时,我们还为Android和iOS创建了模拟器。对于Android,我们可以使用AVD管理器来管理仿真器。对于iOS,我们可以使用Xcode来管理模拟器。如果我们能以同样的方式管理Android模拟器和iOS模拟器,那将非常方便。命令flutteremulators是管理仿真器的工具。
图2-13
指令Flutter模拟器的输出
要启动模拟器,使用flutteremulators--launch
$flutteremulators--launchNexus我们还可以使用flutteremulators--create创建一个新的Android模拟器。下面的命令创建一个名为Pixel的新模拟器。此命令只能创建基于像素设备的模拟器。
$flutteremulators--create--namePixel2.15截图问题你想截图你正在运行的应用。
使用命令flutterscreenshot。
Android模拟器和iOS模拟器都提供了截图的原生功能。对于iOS模拟器,这可以使用菜单文件新屏幕截图来完成。对于Android模拟器,这可以通过点击浮动控制栏中的屏幕截图图标来完成。但是使用UI控件并不方便。默认情况下,模拟器拍摄的屏幕截图会保存到桌面。您必须配置模拟器以保存到所需的位置。
命令flutterscreenshot比模拟器中的内置特性更容易使用。可以使用参数-o或--output指定保存截图的位置;请参见以下命令。
表2-12
截图的类型
类型
||---|---||Device|使用设备的原生屏幕截图功能。该屏幕截图包括当前显示的整个屏幕。这是默认类型。||Rasterizer|使用光栅化器渲染的Flutter应用的屏幕截图。||skia|渲染成Skia图片的Flutterapp截图。|
对于rasterizer和skia类型,需要参数--observatory-port提供运行app的Dart天文台端口号。该端口显示在命令flutterrun的输出中。
你的Flutter应用不是用flutterrun启动的,但是你需要想和它互动。
使用命令flutterattach。
当使用flutterrun启动Flutter应用时,我们可以使用控制台进行交互。但是,该应用也可以通过其他方式启动。例如,我们可以关闭设备上的应用,然后再打开它。在这种情况下,我们失去了对正在运行的应用的控制。flutterattach提供了一种连接正在运行的应用的方式。
如果应用已经在运行,并且你知道它的观测站的端口,使用flutterattach--debug-port来连接它。以下命令附加到正在运行的应用。
$flutterattach--debug-port10010如果没有提供观察端口,flutterattach会开始监听和扫描新激活的应用。当检测到一个新的天文台时,这个命令会自动连接到应用。
图2-14
Flutter附着命令的输出
你想跟踪一个正在运行的应用的执行。
使用命令fluttertrace。
要开始跟踪,我们需要知道正在运行的应用的观察站端口,并用参数--debug-port将这个端口提供给fluttertrace。默认情况下,跟踪运行10秒,并将结果JSON文件写入当前目录,文件名如trace_01.json、trace_02.json等等。在下面的命令中,观察端口是51240。
$fluttertrace--start$fluttertrace--stop要立即停止跟踪,请使用以下命令。
$fluttertrace--stop-d02.18配置FlutterSDK问题你想配置不同设置的FlutterSDK。
使用命令flutterconfig。
表2-13
flutterconfig的参数
||---|---|---||--analytics/--no-analytics|是否报告匿名工具使用统计和崩溃报告。|在||--clear-ios-signing-cert|清除已存储的用于为iOS设备部署的应用签名的开发证书。|||--gradle-dir|设置Gradle安装目录。|||--android-sdk|设置AndroidSDK目录。|||--android-studio-dir|设置AndroidStudio安装目录。||
要删除设置,只需将其配置为空字符串。以下命令禁用分析报告。
$flutterconfig--no-analytics2.19显示应用日志问题您希望看到运行在模拟器或设备上的Flutter应用生成的日志。
使用命令flutterlogs。
即使我们可以调试Flutter应用的代码来找出某些问题的原因,日志对于错误诊断仍然非常有价值。在Flutter应用中生成日志最简单的方法是调用print()方法。命令flutterlogs监视设备上生成的日志,并打印到控制台。
$flutterlogs如果您想在读取日志之前清除日志历史,请使用参数-c或--clear。
图2-15
Flutter日志命令的输出
您希望确保应用的源代码遵循相同的代码风格。
使用命令flutterformat。
让你的应用拥有相同的代码风格是一个很好的实践,特别是对于开发团队。一致的代码风格也有利于代码评审。命令flutterformat可以格式化源代码文件,以匹配Dart的默认代码样式。
要运行flutterformat,您需要提供一个用空格分隔的路径列表。以下命令格式化当前目录。
表2-14
Flutter格式的额外参数
||---|---||-n,--dry-run|只显示哪些文件将被修改,而不实际修改它们。||--set-exit-if-changed|如果该命令改变了格式,返回退出代码1。||-m,--machine|将输出格式设置为JSON。|
您希望看到所有可以被FlutterSDK使用的连接设备。
使用命令flutterdevices。
图2-16
Flutter装置的输出
您已经使用FlutterDriver编写了集成测试,并且想要运行这些测试。
使用命令flutterdrive。
FlutterDriver是FlutterSDK提供的运行集成测试的工具。当运行集成测试时,应用本身运行在模拟器或设备上,但是测试脚本运行在您的本地机器上。在测试期间,测试脚本连接到正在运行的应用,并向应用发送命令来模拟不同的用户操作。测试脚本可以执行像点击和滚动这样的动作。它还可以读取小部件属性并验证它们的正确性。
flutterdrive是运行集成测试的命令。它可以自己启动应用或连接到现有的运行应用。当flutterdrive启动app时,它可以取与flutterrun相同的参数,包括--debug、--profile、--flavor、--route、--target、--observatory-port、--pub、--no-pub、--trace-startup。这些参数与flutterrun中的含义相同。连接已有app时,需要用已有app的天文台URL指定参数--use-existing-app;请参见以下命令。
$flutterdrive--driver=test_driver/simple.dart如果应用由flutterdrive启动,那么应用将在测试脚本完成后停止,除非参数--keep-app-running被指定为保持运行。当连接到一个现有的应用时,应用在测试脚本完成后继续运行,除非参数--no-keep-app-running被指定来停止它。以下命令在测试后保持应用运行。
$flutterdrive--keep-app-running2.23启用FlutterSDK命令的Bash完成问题当键入FlutterSDK命令时,您希望为您的shell提供完成支持。
使用命令flutterbash-completion设置完成。
有了shell完成支持,当您键入一些命令时,shell会尝试完成它。flutterbash-completion打印设置脚本,以支持bash和zsh的完成。如果没有提供参数,安装脚本将被打印到控制台。如果提供了文件路径,安装脚本将被写入该文件。
在macOS上,我们可以先用自制软件安装bash-completion。
$brewinstallbash-completion如果您正在使用bash,您需要修改文件~/.bash_profile来添加下面一行。
[-f/usr/local/etc/bash_completion]&&./usr/local/etc/bash_completion然后可以运行flutterbash-completion将设置脚本保存到目录/usr/local/etc/bash_completion.d;请参见以下命令。
$flutterbash-completion/usr/local/etc/bash_completion.d/flutter最后,您应该运行source~/.bash_profile或重启shell来实现完成。
如果您正在使用zsh,您可以将设置脚本添加到文件~/.zshrc中。首先你需要在~/.zshrc的顶部添加下面一行。
autoloadbashcompinitbashcompinit然后您需要运行下面的命令来将设置脚本添加到~/.zshrc。
$flutterbash-completion>>~/.zshrc最后,您应该运行source~/.zshrc或重启shell来实现完成。
你想要清理Flutter应用的构建文件。
使用命令flutterclean。
命令flutterclean删除build目录中的文件。build目录的磁盘空间可能很大,即使对于小应用也是如此。比如搭建好Fluttersampleapp后,build目录的大小大概是200M。学习Flutter的时候,可能会创建很多小app进行测试。当你认为你已经使用完这些应用时,运行flutterclean是个好主意。你会发现你可以回收大量的磁盘空间。
你想要显式地管理FlutterSDK的缓存。
使用命令flutterprecache。
FlutterSDK在bin/cache目录中保存了所需工件的缓存。该目录包含DartSDK、Flutter引擎、材质字体和Gradlewrapper的二进制文件。如果该缓存不存在,则会自动填充。命令flutterprecache显式更新缓存。除了config、precache、bash-completion和upgrade命令之外,大多数Flutter命令在执行前都会自动更新缓存,所以大多数时候你不需要显式运行这个命令。
e有参数-a或--all-platforms来指定是否应该下载所有平台的工件。默认情况下,只下载当前平台的工件。
$flutterprecache-a2.26摘要这一章是关于你在开发Flutter应用时可能需要用到的工具。您可能不需要使用所有这些工具。在ide的帮助下,您可以执行ide中的大多数操作。这些工具的知识仍然很有价值,因为您可以使用这些工具做更多的事情。在下一章中,我们将看到关于Dart语言基本部分的配方。