Flutter跨平台之旅【基于最新版2.x】1:保姆级开发环境搭建教程(含Flutter学习路线图)❤️不够保姆你找我

4,279 阅读16分钟

本文已参与「掘力星计划」,赢取创作大礼包,挑战创作激励金。

Flutter简介

Flutter是由google推出的一款快速构建原生应用的框架,最初用于移动端应用的开发,目前已经发展为可以构建Web应用、桌面应用、嵌入式设备等的全平台的框架(Flutter2 开始支持)。

Flutter官网对Flutter的描述为:Flutter 是 Google 的 UI 工具包,用于从单个代码库为移动、Web、桌面和嵌入式设备构建漂亮的、本地编译的应用程序。

快速开发、丰富又灵活的UI界面、原生性能等是它的优点,并且在国内,各大一线厂商也都逐步引入了Flutter及对其的支持!

之前官网的描述是:

“Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。Flutter可以与现有的代码一起工作。在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的。”

官网的Showcase中给出了一些优秀的Flutter APP示例,包括很多大厂开发的应用,如阿里闲鱼、今日头条、美团等。

Flutter的优点

Flutter的主要优势:

  • 跨平台:目前支持所有主流平台的开发,包括Web服务器开发。
  • 原生用户界面:生成原生应用,用户体验和性能更高。【界面渲染可以达到120帧/s,React Native(RN)的瓶颈似乎是60帧/s。】,其性能几乎是目前所有跨平台开发框架中最好的。
  • 开源免费。

相对于其他跨平台的移动应用框架。Flutter从底层渲染逻辑到上层的开发语言,给出了一整套完整的解决方案:

  • 一致性UI:视图渲染(UI渲染)完全在Flutter框架内完成(由自己完成GDI的绘制渲染,屏蔽底层系统的差异!),不依赖于底层操作系统提供的任何组件,从根本上保证了视图渲染在Android和iOS上的高度一致性;
  • 开源的高级语言Dart支持:Flutter的开发语言Dart,原本是Google专门为前端开发打造的专属语言,拥有先进的工具链和编译器,同时支持JIT和AOT编译模式。
  • 快速开发和高性能:开发调试效率高、运行速度快、执行性能好,代码执行效率可以媲美原生应用!

此外还有热重载(Hot Reload,热加载,实现快速编写代码)、生产级的布局系统、支持所有主流平台等。

Flutter开发环境搭建

安装Flutter SDK

Flutter官网下载并安装Flutter。推荐从Flutter中文官网中下载(保证速度,中文网中的下载地址已经改为 storage.flutter-io.cn 镜像地址,也可以从官网直接复制下载链接,使用中文官网底部介绍的清华等国内镜像源下载)。

如下,点击下载最新稳定版flutter压缩包flutter_windows_2.5.3-stable.zip

下载完成后解压缩,将其中的flutter整个目录移动到想要放置Flutter SDK的路径中,如C:\devsoft,放好后路径为C:\devsoft\flutter

添加path环境变量

想要在windows中通过命令行使用Flutter命令,需要将Flutter运行文件放入PATH环境变量。

  • 在开始中搜索“env”,选择“编辑系统环境变量”。

  • 在用户变量中找到Path,点击“编辑”:

  • 新建一条变量值,将 flutter\bin 路径添加进去,如:C:\devsoft\flutter\bin

或者直接编辑该条目:以 ; 分隔已有的内容,加入 flutter\bin 目录的完整路径。

Flutter SDK的 flutter\bin 路径中包含dart命令,它指向的就是Flutter自带的Dart SDK。

如果单独安装了Dart SDK,需要确保将 “Flutter SDK 内的 dart 命令的环境变量” 排在独立Dart SDK的前面。

在CMD下查看flutter dart命令是否来自相同的bin目录(以及dart是否排在独立Dart SDK的前面)

【在Powershell中需要运行 where.exe 命名】

> where flutter dart
C:\devsoft\flutter\bin\flutter
C:\devsoft\flutter\bin\flutter.bat
C:\devsoft\flutter\bin\dart
C:\devsoft\flutter\bin\dart.bat

检查 Dart 命令

> dart --version
Dart SDK version: 2.14.4 (stable) (Wed Oct 13 11:11:32 2021 +0200) on "windows_x64"

运行 flutter doctor

安装配置完flutter之后,要执行的第一个命令就是flutter doctor

flutter doctor 会检查我们的现有环境,将必要的Flutter开发所需的工程依赖列出来,并给出尚未安装的软件或者必要的其他操作步骤,根据这些提示,可以更好地配置Android和iOS的开发环境!

在 cmd 或 powershell (或其他命令行工具)中,运行flutter doctor

> flutter doctor
VersionCheckError: Command exited with code 128: git fetch __flutter_version_check__ stable
Standard error: fatal: unable to access 'https://github.com/flutter/flutter.git/': OpenSSL SSL_read: Connection was
reset, errno 10054



  ╔════════════════════════════════════════════════════════════════════════════╗
  ║                 Welcome to Flutter! - https://flutter.dev                  ║
  ║                                                                            ║
  ║ The Flutter tool uses Google Analytics to anonymously report feature usage ║
  ║ statistics and basic crash reports. This data is used to help improve      ║
  ║ Flutter tools over time.                                                   ║
  ║                                                                            ║
  ║ Flutter tool analytics are not sent on the very first run. To disable      ║
  ║ reporting, type 'flutter config --no-analytics'. To display the current    ║
  ║ setting, type 'flutter config'. If you opt out of analytics, an opt-out    ║
  ║ event will be sent, and then no further information will be sent by the    ║
  ║ Flutter tool.                                                              ║
  ║                                                                            ║
  ║ By downloading the Flutter SDK, you agree to the Google Terms of Service.  ║
  ║ Note: The Google Privacy Policy describes how data is handled in this      ║
  ║ service.                                                                   ║
  ║                                                                            ║
  ║ Moreover, Flutter includes the Dart SDK, which may send usage metrics and  ║
  ║ crash reports to Google.                                                   ║
  ║                                                                            ║
  ║ Read about data we send with crash reports:                                ║
  ║ https://flutter.dev/docs/reference/crash-reporting                         ║
  ║                                                                            ║
  ║ See Google's privacy policy:                                               ║
  ║ https://policies.google.com/privacy                                        ║
  ╚════════════════════════════════════════════════════════════════════════════╝


Running "flutter pub get" in flutter_tools...                      10.1s
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 2.5.3, on Microsoft Windows [Version 10.0.19042.1288], locale zh-CN)
[X] Android toolchain - develop for Android devices
    X Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.dev/docs/get-started/install/windows#android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, please use
      `flutter config --android-sdk` to update to that location.

[√] Chrome - develop for the web
[!] Android Studio (not installed)
[√] Connected device (2 available)

! Doctor found issues in 2 categories.

github访问有时会抽风,导致版本检查的错误,VersionCheckError。

可以看到,需要安装 Android Studio (Connected device 此处连接的设备是浏览器【后面将会介绍到】,安装Android Studio时,对应Android SDK也会安装,后期也可以对SDK进行管理和增减)。

安装配置Android Studio

Flutter开发推荐使用 Android Studio IDE,毕竟是谷歌官方的开发工具,并且对Flutter的支持、集成也是最好的。

当然也可以根据喜好使用其他的开发工具,比如IDEA、VSCode等。

Android Studio的安装

上面给出的Android Studio下载地址国内是无法打开的。推荐从 developer.android.google.cn/studio/ 下载 Android Studio。

下载完成后点击安装。

安装过程基本都是傻瓜式的,等待完成即可。

Android Studio运行和配置

  • 启动 Android Studio

在第一次运行时,需要访问 Android SDK 插件,如下:

此处先点击 Cancel 取消访问Android SDK,在后续会手动配置SDK的位置。

这样就打开了 Android Studio,并且会显示一个设置向导

  • 设置向导

如下,是设置开发环境的向导,点击下一步。

选择Standard,下一步。

选择一个习惯的UI主题,下一步。

此时会列出安装的类型、SDK/JDK位置。SDK中会下载安卓模拟器、Android SDK Tools等。点击“Finish”,并等待完成设置。

完成后就可以查看Android Studio。

安装flutter、dart插件

在打开的Android Studio中,选择“Plugin”,输入“flutter”,点击“安装”。

安装flutter插件会也会要求安装dart。

安装完成后,重启IDE。

此时就有了新建Flutter项目的按钮。

附:unable to access android sdk add-on list 其他解决办法

如下介绍出上面点“Cancel”之外的另两个方法。

  • 配置Proxy代理

这个提示的下面除了“Cancel”按钮,还有“Setup Proxy”。点击它,进入代理设置。

选择“Manual proxy configuration”,类型为HTTP,设置 Host name 为:mirrors.neusoft.edu.cn ,Port number 为:80

mirrors.neusoft.edu.cn 网上看到说是一个东欧的站点,其实有机会,可以自己查找,替换为国内的镜像站点!此处仅作说明。

  • Android Studio的配置文件设置跳过。

在Android Studio的安装目录下,找到\bin\idea.properties

在文件最后一行添加 disable.android.first.run=true ,表示初期启动不检测SDK

保存后再次启动Android Studio,就不会有这个提示,而是直接进入“设置向导”。

关于 cmdline-tools component is missing Run path/to/sdkmanager --install "cmdline-tools;latest"

此时再运行 flutter doctor ,检查开发环境。

> flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 2.5.3, on Microsoft Windows [Version 10.0.19042.1288], locale zh-CN)
[!] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    X cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    X Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/windows#android-setup for more details.
[√] Chrome - develop for the web
[√] Android Studio (version 2020.3)
[√] Connected device (2 available)

! Doctor found issues in 1 category.

针对命令行工具的问题,可采用如下的步骤解决:

  1. 打开Android Studio,进入Customize,打开“All settings...”

  1. 在设置中,找到“Appearance & Behavior | System Settings | Android SDK”,切换到“SDK Tools”页,勾选“Android SDK Command-line Tools(latest)”。

点击“应用”,然后确认:

点击下一步,等待安装完成!

此时再次检查:

> flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 2.5.3, on Microsoft Windows [Version 10.0.19042.1288], locale zh-CN)
[!] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
[√] Chrome - develop for the web
[√] Android Studio (version 2020.3)
[√] Connected device (2 available)

! Doctor found issues in 1 category.

如果还是提示“cmdline-tools;latest”的问题,记得将SDK内部的tools和platform-tools文件夹添加到环境变量,再进行检查测试!

参考自I am getting this errors "cmdline-tools component is missing" after installing flutter and android studio... i added andorid sdk. how to solve them?

关于 Some Android licenses not accepted. run: flutter doctor --android-licenses

这个问题解决办法很简单,就是执行flutter doctor --android-licenses命令即可。它需要我们接受一些Android开发的各种license授权,基本都是一路Yes回车!

使用 Flutter 必须同意 Android SDK 平台的协议。

> flutter doctor --android-licenses
6 of 7 SDK package licenses not accepted. 100% Computing updates...
Review licenses that have not been accepted (y/N)? y

1/6: License android-googletv-license:
......省略
All SDK package licenses accepted

最后运行 flutter doctor,已经没有了任何问题!

> flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 2.5.3, on Microsoft Windows [Version 10.0.19042.1288], locale zh-CN)
[√] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
[√] Chrome - develop for the web
[√] Android Studio (version 2020.3)
[√] Connected device (2 available)

• No issues found!

注:在最后一项 Connected device 中,大多数情况可能会提示! No devices available

这个在下面配置连接Android设备或创建AVD虚拟机后,就不会有提示了!

配置Android设备

flutter完整的开发环境,需要有一个可以连接的安卓设备。该设备既可以是连接的物理设备(安卓手机),也可以是Android SDK Tools中AVD创建的虚拟机(模拟器)、浏览器中的安卓模拟器等。

这一步是在运行或测试Flutter应用时需要用到的!一般需要 Android 4.1(API 版本 16)或者更高的设备。

flutter devices 查看连接的设备

执行flutter devices可以查看当前连接的设备。

如下,可以看到两个连接的设备均为web浏览器:

> flutter devices
2 connected devices:

Chrome (web) • chrome • web-javascript • Google Chrome 94.0.4606.81
Edge (web)   • edge   • web-javascript • Microsoft Edge 94.0.992.50

Android模拟器开启才能被flutter devices连接

如下,在Android模拟器开机后才能被flutter devices命令检测连接到。

配置连接Android手机

安装 Google USB Driver

要想进行adb调试,必须安装 Google USB 驱动程序。

adb调试,adb的全称为Android Debug Bridge(Android调试桥),就是起到调试桥的作用。用于连接和调试Android设备。

打开 Android Studio 设置,选择“Android SDK”,点击“SDK Tools”标签,勾选“Google USB Driver”,点击“应用”。

等待Google USB Driver安装完成,驱动程序文件将下载到 android_sdk\extras\google\usb_driver\ 目录中

adb shell连接

adb提供了shell形式对设备的连接,通过shell,可以连接物理机、模拟器等。

adb命令行加入Path环境变量

adb命令执行的是adb.exe程序,它通常位于android_sdk\platform-tools\ 下。

C:\Users\<UserName>\AppData\Local\Android\Sdk\platform-tools

如果在命令行中执行 adb 不识别:

> adb
adb : 无法将“adb”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保路径正确,
然后再试一次。
所在位置 行:1 字符: 1
+ adb
+ ~~~
    + CategoryInfo          : ObjectNotFound: (adb:String) [], CommandNotFoundException
    + FullyQualifiedErrorId : CommandNotFoundException

则将 adb.exe 所在路径加入到Path环境变量。

加入后,重新打开命令行工具:

> adb --version
Android Debug Bridge version 1.0.41
Version 31.0.3-7562133
Installed as C:\Users\win7hostsver\AppData\Local\Android\Sdk\platform-tools\adb.exe

adb devices 查询连接的设备

如下,adb devices可以看到连接的模拟器(通过5554端口)。

> adb devices
List of devices attached
emulator-5554   device

offline —— 表示设备未连接成功或无响应; device —— 设备已连接; no device —— 没有设备/模拟器连接;

adb shell 连接 Android 设备

如下,通过 adb shell 就可以直接进入模拟器中,执行shell相关命令。

PS C:\Users\win7hostsver> adb shell
generic_x86:/ $ 

有个很大的困惑,如果连接了多个Android设备,如何通过 adb shell指定进入哪个设备的shell?

目前不知道如何指定,只能在仅有一个设备时使用 adb shell。

> adb shell
adb.exe: more than one device/emulator

adb的介绍和使用,推荐adb下载安装及使用这篇文章,似乎很全面。

安卓设备打开 Developer options 和 USB debugging

在Android设备(Android手机)中打开“开发者选项”(不同的厂商和安卓系统打开的方式不同,具体查看自己手机系统对应的开启方法,目前大多数开启的方法都是在“关于本机”中,连续4次或8次点击“系统版本”一项)。

然后,进入“开发者选项”(有的可能要从“全局高级设置”中找到),打开USB调试!

连接安卓设备

通过USB接口连接电脑和Android设备,如果Android设备有弹窗提示授权,需要允许授权,让电脑可以访问开发设备。

连接授权成功,运行 flutter devices 可以看到新连接的手机设备。

> flutter devices
3 connected devices:

OE106 (mobile) • b2ada93d • android-arm64  • Android 8.1.0 (API 27)
Chrome (web)   • chrome   • web-javascript • Google Chrome 94.0.4606.81
Edge (web)     • edge     • web-javascript • Microsoft Edge 94.0.992.50

配置Android模拟器

AVD和emulator

Android 虚拟设备 (Android Virtual Device AVD) 是在Android模拟器(emulator)中模拟的Android系统的手机、平板、Wear OS、Android TV 或 Android Automotive OS (汽车系统)等设备。

AVD 管理器(AVD Manager)则用于管理AVD,定义模拟器模拟什么类型、配置的安卓设备。可以直接从Android Studio中启动和使用(当然也可以单独使用)。

AVD 包含硬件配置文件、系统映像、存储区域、皮肤和其他属性。

启用VM acceleration

启用虚拟机加速。这一步不是必需,但是为了更流畅运行Android模拟器、提高模拟器的性能,推荐开启。

图形加速

图形加速使用计算机的硬件(通常是 GPU)来加快屏幕渲染速度,在AVD Manager中创建 AVD 时,可以指定模拟器使用硬件还是软件模拟GPU。

默认,模拟器会根据计算机设置决定使用硬件图形加速(直接使用GPU)还是软件图形加速(使用CPU模拟GPU处理)。

下面介绍使用 AVD Manager 的配置。

  • 新建设备时启用图像硬件加速
  1. 从 Android Studio 打开 AVD 管理器。

  1. 点击左下角的“Create Virtual Device…”

  1. 在新建AVD的过程中,在 Verify Configuration 页面上,找到 Emulated Performance 项,Graphics 选择“Hardware”。

  • 修改已有AVD启用图像硬件加速

在已有设备,右侧的“Actions”中,下拉选择“Edit”,同样在打开的 Verify Configuration 页面中,Graphics 选择“Hardware”。

也可以自命令行中指定图形加速的类型 emulator -avd avd_name -gpu mode [{-option [value]} ... ],具体参见底部的推荐参考中内容。

为 Android 界面启用 Skia 渲染

使用 API 级别 27 及更高级别的映像时,还可以在模拟器中使用 Skia 渲染 Android 界面。

Skia 可以使模拟器更流畅、更高效地渲染图形。

首先启动模拟器,通过 adb shell 连接,并使用以下命令启用 Skia 渲染:

su
setprop debug.hwui.renderer skiagl
stop
start

即,如下的过程:

PS C:\Users\win7hostsver> adb shell
generic_x86:/ $ su
generic_x86:/ # setprop debug.hwui.renderer skiagl
generic_x86:/ # stop
generic_x86:/ # start  # 此处会重新启动模拟器
generic_x86:/ # exit
generic_x86:/ $ exit
PS C:\Users\win7hostsver>

Skia 是一款用 C++ 开发的、性能强悍的 2D 图像绘制引擎,通过它可以实现通过GPU渲染图形,提高图形性能。

Skia 目前是 Android 官方的图像渲染引擎。

Flutter底层使用的图像渲染引擎就是 Skia ,Flutter提供GPU所需的视图数据,通过 Skia 实现渲染显示。

如需进一步了解,可查找相关资料。

虚拟机加速

除了图形加速,还可以通过配置虚拟机加速,提高模拟器的执行速度(CPU处理)。

AVD 可以通过 Hypervisor 使用计算机处理器的虚拟化扩展(即CPU的虚拟化扩展),提高运行速度。

要使用虚拟机加速,SDK Tools推荐使用26.1及以上版本;使用的系统映像(System Image)必须是x86,安卓版本2.3.3(API Level 10)及以上。

这不是最主要的,最主要的是CPU要支持虚拟化扩展技术(大多数现代处理器都支持)。

  • 检查是否安装了 Hypervisor

模拟器的 -accel-check 命令行选项可以检查是否安装了 Hypervisor。

在Windows下执行 Sdk\emulator\emulator -accel-check(Sdk 是 Android SDK 的所在位置):

PS C:\Users\win7hostsver\AppData\Local\Android> Sdk\emulator\emulator -accel-check
accel:
0
HAXM version 7.6.5 (4) is installed and usable.
accel
PS C:\Users\win7hostsver\AppData\Local\Android>

Windows 上的虚拟机加速可以使用以下三个 Hypervisor 之一:Intel Hardware Accelerated Execution Manager (HAXM)、Android Emulator Hypervisor Driver for AMD Processors 或 Windows Hypervisor Platform (WHPX)。

使用 Intel HAXM 或 Android Emulator Hypervisor Driver for AMD Processors时必须停用 Hyper-V 。详细介绍参见官方文档。

  • 在 Windows 上使用 Intel HAXM 配置虚拟机加速

确保 Hyper-V 关闭,具体关闭方法此处不赘述!

  1. 打开 SDK Manager。

  1. 点击 SDK Update Sites 标签页,选择 Intel HAXM。并点击OK:

  1. 运行安装程序。Intel HAXM的下载位置通常为:sdk\extras\intel\Hardware_Accelerated_Execution_Manager\haxm-x.x.x-setup.exe

直接通过向导完成安装,如下,如果已经安装,会提示已安装。

  1. 确认虚拟化驱动程序正常运行:

通过 sc query intelhaxm 命令,可以确认 Intel HAXM 驱动程序是否正常运行:

注:要在cmd中执行才能看到输出结果。

>sc query intelhaxm

SERVICE_NAME: intelhaxm
        TYPE               : 1  KERNEL_DRIVER
        STATE              : 4  RUNNING
                                (STOPPABLE, NOT_PAUSABLE, IGNORES_SHUTDOWN)
        WIN32_EXIT_CODE    : 0  (0x0)
        SERVICE_EXIT_CODE  : 0  (0x0)
        CHECKPOINT         : 0x0
        WAIT_HINT          : 0x0

状态信息包含 STATE : 4 RUNNING 表示正在运行。

通过重新安装Intel HAXM,可以调整内核扩展使用的内存量。

创建Android模拟器

  1. 从 Android Studio 中打开 AVD 管理器。

或者从 Tools > Android > AVD Manager 打开

  1. 点击左下角的“Create Virtual Device…”

选择一个系统映像,download下载。

等待下载完成后(可以看到下载位置为Sdk\system-images\),完成,返回并点下一步。

在 Verify Configuration 页面上,找到 Emulated Performance 项,在 Graphics 中推荐选择“Hardware”或“Automatic”。

也可以点击下方的“Show Advanced Settings”,修改内存、SD空间等设置!点击“Finish”,等待模拟器创建完成。

如下,创建完成后,就可以对Android虚拟设备进行管理了:

如下,是一个启动的Android虚拟机:

此时,通过flutter devices命令,就可以查看到连接的模拟器。并用于后面开发的测试运行。

附:Flutter学习路线图【🧡Learning Roadmap】

原本想自己写一个路线图,但,一是自己还没深入了解(刚开始),参考各方面资料的取舍有些困难,二是学习路线图本来就没有一致的标准,着重在个人的理解和发展方向。

后面看到一个Highly Subjective Roadmap to Flutter Development路线图的介绍,即“高度主观的 Flutter 开发路线图”,下图所示:

后面随着学习的深入,如果有机会,将该图翻译为中文。

同时,极其推荐参考A Flutter Development Roadmap中的介绍,文中给出了更详细学习路线图,以及Flutter的学习清单,可以使用文中的Checklist,对照自己的学习进度!

关于学习路线图如有异议,欢迎评论指出!

附:使用 LibChecker 查看有些APP使用了Flutter

在安卓上是,通过 LibChecker App 可以快速查看应用架构和使用的SDK库等信息。

详细可以查看LibChecker

如下是使用 LibChecker App 查看一个安卓中,使用Flutter库的应用有,可以看到,市面上大多数的app应用,或多或少都有用到Flutter。

LibChecker是一款适用于安卓设备的应用架构查看分析工具。

LibChecker app提供了四大组件的查看,包括服务、活动、广播接收器、内容提供器,功能也是十分的强大,支持知名库标记,基于在线的规则仓库,实时更新,库引用统计,统计手机里使用最多的SDK,包特性分析,查看App否是Split APKs3、是否使用了Kotlin来编写,快照,将当前所有应用的主要信息保存,与未来的某一时刻进行对比,让你能够快速判断各种架构,非常实用!

附:Flutter 120fps超高性能

fps:每秒传输帧数,简单的理解就是每秒渲染的画面数。

Flutter的渲染采用的是GPU渲染的形式,而不是CPU渲染,因此,flutter甚至宣称比原生应用还要快!

常见的fps,比如电影电视通常是24fps,液晶显示器最多的是60HZ,而游戏一般会达到80fps(已经可以很流畅的运行游戏!)

CMD下的清屏命令是cls,而不是clear

此部分内容来自Flutter入门与案例实战

参考推荐

以及,文中给出的各个参考链接。

最后

这篇文章花费了很大精力,欢迎各位评论点赞,给予小小的支持!

关于学习路线图原图,也可以通过评论获取,或指出需要补充的地方。

近2万字!

欢迎大家在评论区多多讨论,说出自己对Flutter的理解和困惑,或指出本文有所纰漏的地方。

并且只要评论就可以参与评论区抽奖,100份掘金周边等你拿,多多支持,多多拿奖!