likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 30

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

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

添加path环境变量

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

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

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

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

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

  • 新建一条变量值,将 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。

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

下载完成后点击安装。

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

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

Android Studio运行和配置

  • 启动 Android Studio

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

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

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

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

  • 设置向导

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

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

选择Standard,下一步。

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

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

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

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

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

完成后就可以查看Android Studio。

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

安装flutter、dart插件

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

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

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

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

安装完成后,重启IDE。

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

Flutter跨平台之旅【基于最新版2.x】1:保姆级开发环境搭建教程(含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

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

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

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

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

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

在文件最后一行添加 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...”

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

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

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

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

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

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

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

此时再次检查:

> 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命令检测连接到。

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

配置连接Android手机

安装 Google USB Driver

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

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

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

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

等待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

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

如果在命令行中执行 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 管理器。

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

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

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

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

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

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

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

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

也可以自命令行中指定图形加速的类型 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。

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

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

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

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

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

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

  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 管理器。

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

或者从 Tools > Android > AVD Manager 打开

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

详细可以查看LibChecker

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

Flutter跨平台之旅【基于最新版2.x】1:保姆级开发环境搭建教程(含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的理解和困惑,或指出本文有所纰漏的地方。

转载自:https://juejin.cn/post/7022542779188248613
评论
请登录