2020-9-9 seo達人
Flutter 構建模式
目前，Flutter一共提供了三種運行模式，分別是Debug、Release和Profile模式。其中，Debug模式主要用在軟件編寫過程中，Release模式主要用于應用發布過程中，而Profile模式則主要用于應用性能分析時，每個模式都有自己特殊的使用場景。下面簡介介紹下這幾種模式：
Debug模式
Debug模式又名調試模式，Debug模式可以同時在物理設備、仿真器或者模擬器上運行應用。默認情況下，使用flutter run命令運行應用程序時就是使用的Debug模式。在Debug模式下，所有的斷言、服務擴展是開啟的，并且在模式對快速開發和運行周期進行了編譯優化，當使用調試工具進行代碼調試時可以直接連接到應用的進程里。
Release模式
Release模式又名發布模式，此模式只能在物理設備上運行，不能在模擬器上運行。使用flutter run --release命令運行應用程序時就是使用的Release模式。在Release模式下，斷點、調試信息和服務擴展是不可用的，并且Release模式針對快速啟動、快速執行和安裝包大小進行了優化。
Profile模式
Profile模式只能在物理設備上運行，不能在模擬器上運行。此模式主要用于應用性能分析，一些應用調試能力是被保留的，目的是分析應用存在的性能問題。Profile模式和Release模式大體相同，不同點體現在，Profile模式的某些服務擴展是啟用的，某些進程調試手段也是開啟的。
調試模式
在 Debug 模式下，app 可以被安裝在物理設備、仿真器或者模擬器上進行調試。在Debug模式下，可以進行如下操作：
斷點 是開啟的。
服務擴展是開啟的。
針對快速開發和運行周期進行了編譯優化（但不是針對執行速度、二進制文件大小或者部署）。
調試開啟，類似 開發者工具 等調試工具可以連接到進程里。
如果是在 Web 平臺下的調試模式，可以進行如下操作：
本次構建 沒有 最小化資源并且整個構建 沒有 優化性能。
為了簡化調試，這個 Web 應用使用了 dartdevc 編譯器。
默認情況下，運行 flutter run 會使用 Debug 模式，同時 IDE 也支持這些模式。例如，Android Studio 提供了 Run > Debug… 菜單選項，而且在項目面板中還有一個三角形的綠色運行按鈕圖標 。
Release 模式
當你想要最大的優化以及最小的占用空間時，就使用 Release 模式來部署 app。 release 模式是不支持模擬器或者仿真器的，使用 Release 模式意味著。
斷點是不可用的。
調試信息是不可見的。
調試是禁用的。
編譯針對快速啟動、快速執行和小的 package 的大小進行了優化。
服務擴展是禁用的。
對于Web開發來說，使用 Release 模式意味著。
這次構建資源已經被壓縮，并且性能得以優化。
這個 Web 應用通過 dart2js 編譯器構建，以確保更優秀的性能。
Profile 模式
在 Profile 模式下，一些調試能力是被保留的，足夠分析你的 app 性能。Profile 模式在仿真器和模擬器上是不可用的，因為他們的行為不能代表真實的性能。和 release 相比， profile 模式有以下不同：
一些服務擴展是啟用的。例如，支持 performance overlay。
Tracing 是啟用的，一些調試工具，比如 開發者工具 可以連接到進程里。
在 Web 平臺使用Profile 模式意味著：
資源文件沒有被壓縮，但是整體性能已經優化。
這個 Web 應用通過 dart2js 編譯器構建。
調試工具
在Flutter應用開發中，有很多工具可以幫助調試 Flutter 應用程序，常見的如下所示。
開發者工具，是一套運行在瀏覽器的性能及分析工具。
Android Studio/IntelliJ 和 VS Code（借助 Flutter 和 Dart 插件）支持內置的源代碼調試器，可以設置斷點，單步調試，檢查數值。
Flutter inspector，是開發者工具提供的 widget 檢查器，也可直接在 Android Studio 和 IntelliJ 中使用（借助 Flutter 插件）。檢查器可以可視化展現 widget 樹，查看單個 widget 及其屬性值，開啟性能圖層，等等。
開發者工具
要調試及分析應用，開發者工具可能是你的首選。開發者工具運行在瀏覽器，支持以下特性：
源代碼調試器
Widget 檢查器，展示可視化的 widget 樹； “widget select” 模式，在應用中選擇一個 widget，會在 widget 樹直接定位到它的位置。
內存分析
時間線視圖，支持跟蹤，導入及導出跟蹤信息
日志視圖
如果你在Debug 模式 或Profile 模式 運行，那么可以在瀏覽器打開開發者工具連接到你的應用。開發者工具不能用在 Release 模式 編譯的應用，因為調試和分析信息都被刪除了。如果你要用開發者工具分析應用，需確保使用 Profile 模式運行應用。
在這里插入圖片描述
斷點調試
和其他語言一樣，Flutter的斷點調試支持在 IDE 或編輯器（比如 Android Studio/IntelliJ 和 VS Code）、或者通過編碼兩種方式。
其中，開發者工具調試器如下圖所示。
在這里插入圖片描述
如果需要，在源代碼中設置斷點，然后點擊工具欄中的 【Debug】 按鈕，或選擇 【Run】 > 【Debug】即可開啟調試功能。
在這里插入圖片描述
開啟調試后，可以在控制臺看到如下一些信息。
底部的 Debugger 窗口會顯示出堆棧和變量信息。
底部的 Console 窗口會顯示詳細的日志輸出。
調試基于默認的啟動配置，如果需要自定義，點擊選擇目標下拉按鈕，選擇 Edit configuration 進行配置。
在進行斷點調試時，使用得最多的就是單步調試，三個單步調試按鈕在暫停后會變為可用狀態。
使用 Step in 來進入被調用的方法，在遇到方法內的第一行可執行代碼時結束。
使用 Step over 直接執行某個方法調用而不進入內部；該按鈕在當前方法內按行執行。
使用 Step out 來跳出當前方法，這種方式會直接執行完所有當前方法內的語句。
除此之外，我們還可以使用代碼的方式進行斷點調試，我們可以在源代碼中使用 debugger()函數來開啟斷點，當代碼運行到此處時就會刮起，如下所示。
import 'dart:developer';
void someFunction(double offset) {
debugger(when: offset > 30.0);
// ...
}
Dart 分析器
如果你使用的是 Android Studio或者VSCode，那么工具會自帶的 Dart 分析器默認會檢查代碼，并發現可能的錯誤。如果你使用命令行，則可以使用 flutter analyze命令來檢查代碼。Dart 分析器非常依賴你在代碼中添加的類型注解，以幫助跟蹤問題。
另外，我們可以使用flutter analyze --flutter-repo命令將分析結果打印到控制臺上，每次運行這個命名之前，請先運行flutter update-packages 升級的包，這樣就可以獲取的依賴包。如果你不這樣做，你可能會從dart:ui得到一些錯誤消息，比如偏移量等。因為執行flutter analysis 命令時并不會主動去拉取依賴。
對于一次性的Dart分析，直接使用flutter analyze --flutter-repo即可，對于連續分析，則可以使用flutter analyze --flutter-repo --watch命令。如果你想知道多少個成員變量丟失了dartdocs，可以添加一個dartdocs參數。
Flutter inspector 工具
Flutter inspector 是分析Flutter組件狀態樹的利器，Flutter使用小部件來控制頁面組件到布局的精準控制，Flutter inspector 可以幫助我們進行如下一些分析。
進行布局分析，理解布局層次
診斷布局問題
在這里插入圖片描述
在調試模式下，我們點擊Android Studio右邊Flutter inspector按鈕即可開啟Flutter inspector分析，Flutter inspector提供了如下的可視化調試工具。
在這里插入圖片描述
Select widget mode：啟用此按鈕后，選擇組件樹的代碼會自動跳轉到對應的源代碼里面。
Refresh tree ： 重新加載的組件信息。
Slow Animations：放慢動畫速度，以便進行視覺上的查驗。
Debug Paint： 邊框、方向的可視化。
Paint Baselines： 每個渲染框在它的每個文本基線上畫一條線。
Repaint Rainbow：查看重繪的嚴重程度，嚴重的會被爆紅。
除了上面的功能外，我們還可以點擊【Open DevTools】打開Flutter的調試頁面，可以借助它進行很多性能分析，后面會具體介紹。
在這里插入圖片描述
測量應用啟動時間
要收集有關 Flutter 應用程序啟動所需時間的詳細信息，可以在運行 flutter run 命令時使用 trace-startup 和 profile 選項，如下所示。
flutter run --trace-startup --profile
跟蹤輸出被保存到 Flutter 工程目錄在 build 目錄下，一個名為 start_up_info.json 的 JSON 文件中，輸出列出了從應用程序啟動到這些跟蹤事件（以微秒捕獲）所用的時間，如下所示。
{
"engineEnterTimestampMicros": 2346054348633,
"timeToFrameworkInitMicros": 812748,
"timeToFirstFrameRasterizedMicros": 1573154,
"timeToFirstFrameMicros": 1221472,
"timeAfterFrameworkInitMicros": 408724
}
對應的具體含義如下：
進入 Flutter 引擎時
展示應用第一幀時
初始化Flutter框架時
完成Flutter框架初始化時
使用Android Studio進行調試
Flutter官方推薦使用Android Studio或VSCode進行應用開發， 和其他語言的調試一樣，Dart代碼的調試流程也差不多。如果還沒有Flutter項目，可以新建一個示例項目。通過單擊首先，點擊調試圖標（Debug-run icon）同時打開調試面板并在控制臺中運行應用，首次運行應用是最慢的，應用啟動后，界面應該是下面這樣的。
在這里插入圖片描述
然后，我們在在 counter++ 這一行上添加斷點。在應用里，點擊 + 按鈕（FloatingActionButton，或者簡稱 FAB）來增加數字，應用會暫停。
在這里插入圖片描述
你可以 step in/out/over Dart 語句、熱重載和恢復執行應用、以及像使用其他調試器一樣來使用 Dart 調試器。
Flutter inspector
Flutter inspector 是一個用來可視化以及查看 Flutter widget 樹的工具，提供如下功能：
了解現有布局
診斷布局問題
可以使用 Android Studio 窗口右側的垂直按鈕來打開Flutter inspector，如下圖所示。
在這里插入圖片描述
Flutter outline
Flutter Outline 是一個可視的顯示頁面構建方法的功能，注意在構建方法上可能與 widget 樹不同，可以使用 Android Studio 窗口右側的垂直按鈕切換 outline 的顯示。
在這里插入圖片描述
Tip: 我們可以安裝一個 Presentation Assistant 插件來輔助我們進行開發，Presentation Assistant 提供了很多的快捷功能。例如，當焦點在編輯面板中時，輸入 command-Shift-A（Mac）或者 shift-control-A（Windows 和 Linux），該插件會同時顯示「查找」面板并顯示在所有三個平臺上執行此操作的提示。
在這里插入圖片描述
然后在輸入框中輸入attach關鍵字，顯示如下圖。
在這里插入圖片描述
使用 Android Gradle 調試
為了調試原生代碼，你需要一個包含 Android 原生代碼的應用。在本節中，你將學會如何連接兩個調試器到你的應用：
1）Dart 調試器。
2）Android Gradle 調試器。
創建一個基本的 Flutter 應用，然后替換 lib/main.dart 的代碼為以下示例代碼。
// Copyright 2017 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'URL Launcher',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'URL Launcher'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
Future<void> _launched;
Future<void> _launchInBrowser(String url) async {
if (await canLaunch(url)) {
await launch(url, forceSafariVC: false, forceWebView: false);
} else {
throw 'Could not launch $url';
}
}
Future<void> _launchInWebViewOrVC(String url) async {
if (await canLaunch(url)) {
await launch(url, forceSafariVC: true, forceWebView: true);
} else {
throw 'Could not launch $url';
}
}
Widget _launchStatus(BuildContext context, AsyncSnapshot<void> snapshot) {
if (snapshot.hasError) {
return Text('Error: ${snapshot.error}');
} else {
return Text('');
}
}
@override
Widget build(BuildContext context) {
String toLaunch = 'https://flutter.dev';
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: EdgeInsets.all(16.0),
child: Text(toLaunch),
),
RaisedButton(
onPressed: () => setState(() {
_launched = _launchInBrowser(toLaunch);
}),
child: Text('Launch in browser'),
),
Padding(padding: EdgeInsets.all(16.0)),
RaisedButton(
onPressed: () => setState(() {
_launched = _launchInWebViewOrVC(toLaunch);
}),
child: Text('Launch in app'),
),
Padding(padding: EdgeInsets.all(16.0)),
FutureBuilder<void>(future: _launched, builder: _launchStatus),
],
),
),
);
}
}
然后，添加 url_launcher 依賴到 pubspec 文件，并執行 flutter pub get命令拉取依賴包。
name: flutter_app
description: A new Flutter application.
version: 1.0.0+1
dependencies:
flutter:
sdk: flutter
url_launcher: ^3.0.3
cupertino_icons: ^0.1.2
dev_dependencies:
flutter_test:
sdk: flutter
點擊調試按鈕（Debug-run icon）來同時打開調試面板并啟動應用，如下圖所示。
在這里插入圖片描述
點擊 【Attach debugger to Android process】 按鈕，從進程對話框中，你應該可以看到每一個設備的入口。選擇 show all processes 來顯示每個設備可用的進程。
在這里插入圖片描述
在調試面板中，你現在應該可以看到一個 Android Debugger 標簽頁，然后依次選擇【app_name】 > 【android】 > 【app】 > 【src】 >【 main】 > 【java】 > 【io.flutter plugins】在項目面板，然后雙擊 GeneratedProjectRegistrant 在編輯面板中打開 Java 代碼，此時Dart 和原生調試器都在與同一個進程交互。
藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務