Flutter 構(gòu)建模式

目前，F(xiàn)lutter一共提供了三種運行模式，分別是Debug、Release和Profile模式。其中，Debug模式主要用在軟件編寫過程中，Release模式主要用于應(yīng)用發(fā)布過程中，而Profile模式則主要用于應(yīng)用性能分析時，每個模式都有自己特殊的使用場景。下面簡介介紹下這幾種模式：

Debug模式

Debug模式又名調(diào)試模式，Debug模式可以同時在物理設(shè)備、仿真器或者模擬器上運行應(yīng)用。默認情況下，使用flutter run命令運行應(yīng)用程序時就是使用的Debug模式。在Debug模式下，所有的斷言、服務(wù)擴展是開啟的，并且在模式對快速開發(fā)和運行周期進行了編譯優(yōu)化，當使用調(diào)試工具進行代碼調(diào)試時可以直接連接到應(yīng)用的進程里。

Release模式

Release模式又名發(fā)布模式，此模式只能在物理設(shè)備上運行，不能在模擬器上運行。使用flutter run --release命令運行應(yīng)用程序時就是使用的Release模式。在Release模式下，斷點、調(diào)試信息和服務(wù)擴展是不可用的，并且Release模式針對快速啟動、快速執(zhí)行和安裝包大小進行了優(yōu)化。

Profile模式

Profile模式只能在物理設(shè)備上運行，不能在模擬器上運行。此模式主要用于應(yīng)用性能分析，一些應(yīng)用調(diào)試能力是被保留的，目的是分析應(yīng)用存在的性能問題。Profile模式和Release模式大體相同，不同點體現(xiàn)在，Profile模式的某些服務(wù)擴展是啟用的，某些進程調(diào)試手段也是開啟的。

調(diào)試模式

在 Debug 模式下，app 可以被安裝在物理設(shè)備、仿真器或者模擬器上進行調(diào)試。在Debug模式下，可以進行如下操作：

斷點 是開啟的。

服務(wù)擴展是開啟的。

針對快速開發(fā)和運行周期進行了編譯優(yōu)化（但不是針對執(zhí)行速度、二進制文件大小或者部署）。

調(diào)試開啟，類似 開發(fā)者工具 等調(diào)試工具可以連接到進程里。

如果是在 Web 平臺下的調(diào)試模式，可以進行如下操作：

本次構(gòu)建 沒有 最小化資源并且整個構(gòu)建 沒有 優(yōu)化性能。

為了簡化調(diào)試，這個 Web 應(yīng)用使用了 dartdevc 編譯器。

默認情況下，運行 flutter run 會使用 Debug 模式，同時 IDE 也支持這些模式。例如，Android Studio 提供了 Run > Debug… 菜單選項，而且在項目面板中還有一個三角形的綠色運行按鈕圖標 。

Release 模式

當你想要最大的優(yōu)化以及最小的占用空間時，就使用 Release 模式來部署 app。 release 模式是不支持模擬器或者仿真器的，使用 Release 模式意味著。

斷點是不可用的。

調(diào)試信息是不可見的。

調(diào)試是禁用的。

編譯針對快速啟動、快速執(zhí)行和小的 package 的大小進行了優(yōu)化。

服務(wù)擴展是禁用的。

對于Web開發(fā)來說，使用 Release 模式意味著。

這次構(gòu)建資源已經(jīng)被壓縮，并且性能得以優(yōu)化。

這個 Web 應(yīng)用通過 dart2js 編譯器構(gòu)建，以確保更優(yōu)秀的性能。

Profile 模式

在 Profile 模式下，一些調(diào)試能力是被保留的，足夠分析你的 app 性能。Profile 模式在仿真器和模擬器上是不可用的，因為他們的行為不能代表真實的性能。和 release 相比， profile 模式有以下不同：

一些服務(wù)擴展是啟用的。例如，支持 performance overlay。

Tracing 是啟用的，一些調(diào)試工具，比如 開發(fā)者工具 可以連接到進程里。

在 Web 平臺使用Profile 模式意味著：

資源文件沒有被壓縮，但是整體性能已經(jīng)優(yōu)化。

這個 Web 應(yīng)用通過 dart2js 編譯器構(gòu)建。

調(diào)試工具

在Flutter應(yīng)用開發(fā)中，有很多工具可以幫助調(diào)試 Flutter 應(yīng)用程序，常見的如下所示。

開發(fā)者工具，是一套運行在瀏覽器的性能及分析工具。

Android Studio/IntelliJ 和 VS Code（借助 Flutter 和 Dart 插件）支持內(nèi)置的源代碼調(diào)試器，可以設(shè)置斷點，單步調(diào)試，檢查數(shù)值。

Flutter inspector，是開發(fā)者工具提供的 widget 檢查器，也可直接在 Android Studio 和 IntelliJ 中使用（借助 Flutter 插件）。檢查器可以可視化展現(xiàn) widget 樹，查看單個 widget 及其屬性值，開啟性能圖層，等等。

開發(fā)者工具

要調(diào)試及分析應(yīng)用，開發(fā)者工具可能是你的首選。開發(fā)者工具運行在瀏覽器，支持以下特性：

源代碼調(diào)試器

Widget 檢查器，展示可視化的 widget 樹； “widget select” 模式，在應(yīng)用中選擇一個 widget，會在 widget 樹直接定位到它的位置。

內(nèi)存分析

時間線視圖，支持跟蹤，導(dǎo)入及導(dǎo)出跟蹤信息

日志視圖

如果你在Debug 模式 或Profile 模式 運行，那么可以在瀏覽器打開開發(fā)者工具連接到你的應(yīng)用。開發(fā)者工具不能用在 Release 模式 編譯的應(yīng)用，因為調(diào)試和分析信息都被刪除了。如果你要用開發(fā)者工具分析應(yīng)用，需確保使用 Profile 模式運行應(yīng)用。

在這里插入圖片描述

斷點調(diào)試

和其他語言一樣，F(xiàn)lutter的斷點調(diào)試支持在 IDE 或編輯器（比如 Android Studio/IntelliJ 和 VS Code）、或者通過編碼兩種方式。

其中，開發(fā)者工具調(diào)試器如下圖所示。

在這里插入圖片描述

如果需要，在源代碼中設(shè)置斷點，然后點擊工具欄中的 【Debug】 按鈕，或選擇 【Run】 > 【Debug】即可開啟調(diào)試功能。

在這里插入圖片描述

開啟調(diào)試后，可以在控制臺看到如下一些信息。

底部的 Debugger 窗口會顯示出堆棧和變量信息。

底部的 Console 窗口會顯示詳細的日志輸出。

調(diào)試基于默認的啟動配置，如果需要自定義，點擊選擇目標下拉按鈕，選擇 Edit configuration 進行配置。

在進行斷點調(diào)試時，使用得最多的就是單步調(diào)試，三個單步調(diào)試按鈕在暫停后會變?yōu)榭捎脿顟B(tài)。

使用 Step in 來進入被調(diào)用的方法，在遇到方法內(nèi)的第一行可執(zhí)行代碼時結(jié)束。

使用 Step over 直接執(zhí)行某個方法調(diào)用而不進入內(nèi)部；該按鈕在當前方法內(nèi)按行執(zhí)行。

使用 Step out 來跳出當前方法，這種方式會直接執(zhí)行完所有當前方法內(nèi)的語句。

除此之外，我們還可以使用代碼的方式進行斷點調(diào)試，我們可以在源代碼中使用 debugger()函數(shù)來開啟斷點，當代碼運行到此處時就會刮起，如下所示。

import 'dart:developer';

void someFunction(double offset) {

 debugger(when: offset > 30.0);

 // ...

}

Dart 分析器

如果你使用的是 Android Studio或者VSCode，那么工具會自帶的 Dart 分析器默認會檢查代碼，并發(fā)現(xiàn)可能的錯誤。如果你使用命令行，則可以使用 flutter analyze命令來檢查代碼。Dart 分析器非常依賴你在代碼中添加的類型注解，以幫助跟蹤問題。

另外，我們可以使用flutter analyze --flutter-repo命令將分析結(jié)果打印到控制臺上，每次運行這個命名之前，請先運行flutter update-packages 升級的包，這樣就可以獲取的依賴包。如果你不這樣做，你可能會從dart:ui得到一些錯誤消息，比如偏移量等。因為執(zhí)行flutter analysis 命令時并不會主動去拉取依賴。

對于一次性的Dart分析，直接使用flutter analyze --flutter-repo即可，對于連續(xù)分析，則可以使用flutter analyze --flutter-repo --watch命令。如果你想知道多少個成員變量丟失了dartdocs，可以添加一個dartdocs參數(shù)。

Flutter inspector 工具

Flutter inspector 是分析Flutter組件狀態(tài)樹的利器，F(xiàn)lutter使用小部件來控制頁面組件到布局的精準控制，F(xiàn)lutter inspector 可以幫助我們進行如下一些分析。

進行布局分析，理解布局層次

診斷布局問題

在這里插入圖片描述

在調(diào)試模式下，我們點擊Android Studio右邊Flutter inspector按鈕即可開啟Flutter inspector分析，F(xiàn)lutter inspector提供了如下的可視化調(diào)試工具。

在這里插入圖片描述

Select widget mode：啟用此按鈕后，選擇組件樹的代碼會自動跳轉(zhuǎn)到對應(yīng)的源代碼里面。

Refresh tree ： 重新加載的組件信息。

Slow Animations：放慢動畫速度，以便進行視覺上的查驗。

Debug Paint： 邊框、方向的可視化。

Paint Baselines： 每個渲染框在它的每個文本基線上畫一條線。

Repaint Rainbow：查看重繪的嚴重程度，嚴重的會被爆紅。

除了上面的功能外，我們還可以點擊【Open DevTools】打開Flutter的調(diào)試頁面，可以借助它進行很多性能分析，后面會具體介紹。

在這里插入圖片描述

測量應(yīng)用啟動時間

要收集有關(guān) Flutter 應(yīng)用程序啟動所需時間的詳細信息，可以在運行 flutter run 命令時使用 trace-startup 和 profile 選項，如下所示。

flutter run --trace-startup --profile

跟蹤輸出被保存到 Flutter 工程目錄在 build 目錄下，一個名為 start_up_info.json 的 JSON 文件中，輸出列出了從應(yīng)用程序啟動到這些跟蹤事件（以微秒捕獲）所用的時間，如下所示。

{

 "engineEnterTimestampMicros": 2346054348633,

 "timeToFrameworkInitMicros": 812748,

 "timeToFirstFrameRasterizedMicros": 1573154,

 "timeToFirstFrameMicros": 1221472,

 "timeAfterFrameworkInitMicros": 408724

}

對應(yīng)的具體含義如下：

進入 Flutter 引擎時

展示應(yīng)用第一幀時

初始化Flutter框架時

完成Flutter框架初始化時

使用Android Studio進行調(diào)試

Flutter官方推薦使用Android Studio或VSCode進行應(yīng)用開發(fā)， 和其他語言的調(diào)試一樣，Dart代碼的調(diào)試流程也差不多。如果還沒有Flutter項目，可以新建一個示例項目。通過單擊首先，點擊調(diào)試圖標（Debug-run icon）同時打開調(diào)試面板并在控制臺中運行應(yīng)用，首次運行應(yīng)用是最慢的，應(yīng)用啟動后，界面應(yīng)該是下面這樣的。

在這里插入圖片描述

然后，我們在在 counter++ 這一行上添加斷點。在應(yīng)用里，點擊 + 按鈕（FloatingActionButton，或者簡稱 FAB）來增加數(shù)字，應(yīng)用會暫停。

在這里插入圖片描述

你可以 step in/out/over Dart 語句、熱重載和恢復(fù)執(zhí)行應(yīng)用、以及像使用其他調(diào)試器一樣來使用 Dart 調(diào)試器。

Flutter inspector

Flutter inspector 是一個用來可視化以及查看 Flutter widget 樹的工具，提供如下功能：

了解現(xiàn)有布局

診斷布局問題

可以使用 Android Studio 窗口右側(cè)的垂直按鈕來打開Flutter inspector，如下圖所示。

在這里插入圖片描述

Flutter outline

Flutter Outline 是一個可視的顯示頁面構(gòu)建方法的功能，注意在構(gòu)建方法上可能與 widget 樹不同，可以使用 Android Studio 窗口右側(cè)的垂直按鈕切換 outline 的顯示。

在這里插入圖片描述

Tip: 我們可以安裝一個 Presentation Assistant 插件來輔助我們進行開發(fā)，Presentation Assistant 提供了很多的快捷功能。例如，當焦點在編輯面板中時，輸入 command-Shift-A（Mac）或者 shift-control-A（Windows 和 Linux），該插件會同時顯示「查找」面板并顯示在所有三個平臺上執(zhí)行此操作的提示。

在這里插入圖片描述

然后在輸入框中輸入attach關(guān)鍵字，顯示如下圖。

在這里插入圖片描述

使用 Android Gradle 調(diào)試

為了調(diào)試原生代碼，你需要一個包含 Android 原生代碼的應(yīng)用。在本節(jié)中，你將學會如何連接兩個調(diào)試器到你的應(yīng)用：

1）Dart 調(diào)試器。

2）Android Gradle 調(diào)試器。

創(chuàng)建一個基本的 Flutter 應(yīng)用，然后替換 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 文件，并執(zhí)行 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

點擊調(diào)試按鈕（Debug-run icon）來同時打開調(diào)試面板并啟動應(yīng)用，如下圖所示。

在這里插入圖片描述

點擊 【Attach debugger to Android process】 按鈕，從進程對話框中，你應(yīng)該可以看到每一個設(shè)備的入口。選擇 show all processes 來顯示每個設(shè)備可用的進程。

在這里插入圖片描述

在調(diào)試面板中，你現(xiàn)在應(yīng)該可以看到一個 Android Debugger 標簽頁，然后依次選擇【app_name】 > 【android】 > 【app】 > 【src】 >【 main】 > 【java】 > 【io.flutter plugins】在項目面板，然后雙擊 GeneratedProjectRegistrant 在編輯面板中打開 Java 代碼，此時Dart 和原生調(diào)試器都在與同一個進程交互。

藍藍設(shè)計( www.li-bodun.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)