Featured image of post Flutter的安装

Flutter的安装

安装flutter并开发第一个app...

Flutter安装说明

Flutter是Google开发的开源UI框架,用于在移动应用、web应用和桌面应用上构建漂亮、高性能的用户界面

本文以windows作为开发环境,介绍一下flutter的安装使用过程。话不多说,我们直接开始吧~

系统配置要求

为了安装和运行 Flutter,我们的开发环境必须至少满足以下要求:

  • 操作系统:Windows 10 或更高的版本(基于 x86-64 的 64 位操作系统)。
  • 磁盘空间:除安装 IDE 和一些工具之外还应有至少 2.5 GB 的空间。
  • 工具:要让 Flutter 在你的开发环境中正常使用,依赖于以下的工具:

Flutter SDK

下载

推荐从清华源镜像站点下载 Flutter SDK 压缩包,下载最新稳定版本即可,例如 flutter_windows_3.16.5-stable.zip

下载完之后,在你希望的路径解压文件(例如D:\flutter),注意:

  1. 路径不要包含特殊字符或者空格;
  2. 请不要将flutter安装在需要高权限的文件夹中,例如 C:\Program Files\,否则会在运行过程中因为没有权限而导致奇奇怪怪的问题。

在安装目录打开控制台,试一试flutter命令吧~

更新环境变量

目前我们只能在当前目录下使用flutter命令,可以将flutter路径添加进环境变量,就能在任意位置使用flutter,而不必打开安装目录。操作如下:

  1. 任务栏搜索框搜索 [env] (或者直接搜索环境变量),选择编辑系统环境变量;如果搜索结果有编辑帐户的环境变量,选它也可以直接打开环境变量配置页;

  2. 用户变量 一栏中,检查是否有 Path 这个条目:

    • 如果存在这个条目,加入flutter\bin目录的完整路径

    • 如果不存在,在用户环境变量中创建一个新的Path变量,并将flutter\bin的完整路径作为Path变量的值。

重新打开命令行窗口,键入 flutter,已经可以正常使用了~

配置Dart

Flutter是基于Dart语言的移动UI框架。Flutter SDK 在 flutter 命令脚本的同级目录下增加了 dart 命令,你可以更方便地运行 Dart 命令行程序:

下载 Flutter SDK 时也会下载对应版本的 Dart SDK,不需要再额外安装。但如果你单独下载了 Dart SDK,需要确保 Flutter SDK 内的 dart 在你的环境变量中排在首位,因为单独的 SDK 可能并不兼容 Flutter SDK。

你可以运行下面的命令,查看 flutterdart 两个命令是否来自相同的 bin 目录,并且是否可以兼容使用。

1
2
3
4
5
6
C:\>where flutter dart
C:\path-to-flutter-sdk\bin\flutter
C:\path-to-flutter-sdk\bin\flutter.bat
C:\path-to-dart-sdk\bin\dart.exe        :: this should go after `C:\path-to-flutter-sdk\bin\` commands
C:\path-to-flutter-sdk\bin\dart
C:\path-to-flutter-sdk\bin\dart.bat

如上所示,Flutter SDK 内的 dart 命令不在首位。那么就需要更新 PATH,将 C:\path-to-flutter-sdk\bin\ 放在 C:\path-to-dart-sdk\bin\ 前面(当前场景)。接着重启命令行使修改生效,再次运行 where,此时来自相同目录的 flutterdart 已经排在前面。

1
2
3
4
5
6
C:\>where flutter dart
C:\dev\src\flutter\bin\flutter
C:\dev\src\flutter\bin\flutter.bat
C:\dev\src\flutter\bin\dart
C:\dev\src\flutter\bin\dart.bat
C:\dev\src\dart-sdk\bin\dart.exe

然而,如果你在使用 PowerShellwhere 其实是 Where-Object 命令的别名,所以实际上你需要运行 where.exe

1
PS C:\> where.exe flutter dart

了解更多 dart 命令的用法,可以在命令行中运行 dart -h 查看,也可以访问 DartVM 运行环境

环境检测

flutter doctor

打开一个新的控制台窗口,执行flutter doctor命令。它会检查现有环境,并将检测结果以报告形式呈现出来。仔细阅读它显示的内容,检查是否有尚未安装的软件或是有其他的步骤需要完成(通常会以粗体呈现)。

安装缺失插件

运行了上一步的依赖检查,如果有缺失插件或依赖项,则需要补装。每安装任何一个依赖项,都可以随时执行 flutter doctor 来检查是否正确配置了所需内容。

这里以我的实际情况为例,看看怎么一步步安装缺失的插件:

报告提示存在三个问题:

  • Android toolchain
  • Visual Studio
  • Android Studio (not installed警告)

我们来依次解决它们。

AndroidSDK

这是一套开发安卓应用必备的工具链,但目前环境并未安装。

报告给出了两种解决方案:

方案一:安装Android Studio

安装成功后,首次启动时,它会自动帮助我们安装 Android SDK 组件。

下载地址:https://developer.android.com/studio?hl=zh-cn

方案二:单纯安装Android SDK

因为我需要使用VSCode代替Android Studio进行开发,所以采用手动方式安装Android SDK。

commandlinetools

手动安装Android SDK需要用到sdkmanager工具,它包含在官方给出的commandlinetools工具包中。

进入官方下载地址,选择自己环境对应的压缩包:

完成之后,解压到你想要的位置(例如D:\SDK),在解压后的cmdline-tools目录中新建子文件夹latest,并将解压后的文件转移到 latest 文件夹中;

cmdline-tools/latest/bin目录包含的内容有:

  • apkanalyzer 可以在构建流程完成后立即了解 APK 的组成,并且可以比较两个 APK 之间的差异。使用 apkanalyzer 可以减少调试应用中的 DEX 文件和资源相关问题所花费的时间,并减小 APK 的大小。
  • avdmanager 可以用于从命令行创建和管理 Android 虚拟设备 (AVD)。借助 AVD,您可以定义要在 Android 模拟器中模拟的 Android 手机、Wear OS 手表或 Android TV 设备的特性。
  • lint用于代码扫描,可以帮助识别和纠正代码的结构质量问题。
  • retrace对于由 R8 编译的应用程序,用于从经过混淆处理的堆栈轨迹获取原始堆栈轨迹。系统会通过在映射文件中对类名和方法名与其原始定义进行匹配来重构堆栈轨迹。(对映射回原始源代码的模糊堆栈跟踪进行解码)
  • sdkmanager 帮助查看、安装、更新和卸载 Android SDK 的软件包。我们不使用 Android Studio,所以可以使用这个命令行工具管理 SDK 包。
sdkmanager

我们把cmdline-tools/latest/bin添加进系统环境变量,打开命令行运行sdkmanager.bat --list可以查看可安装的Android SDK包:

如果运行了 sdkmanager.bat –list;终端报错提示:

1
2
3
4
ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.

Please set the JAVA_HOME variable in your environment to match the
location of your Java installation.

那么就需要安装JDK

下载之后安装到想要的目录即可,然后配置系统环境变量:

1.新增JAVA_HOME=xxx,xxx替换为你的JDK安装目录;

2.Path新增值:%JAVA_HOME%\bin

此时再次运行 sdkmanager.bat –list,即可正常展示可安装目录。

安装必要的Android SDK组件:

1
2
3
4
5
6
7
8
# 至少需要一个Android版本的SDK
sdkmanager.bat --install "platforms;android-34"

# 构建工具,用于构建和编译Android应用
sdkmanager.bat --install "build-tools;34.0.0"

# 平台工具
sdkmanager.bat --install "platform-tools"

安装完成之后,各组件位于AndroidSDK根目录:

配置 flutter config:

1
2
# xxx 替换为 sdk 根目录路径,也就是 commandlinetools上一级
flutter config --android-sdk D:\AndroidSDK

此时重新打开cmd窗口,再次运行flutter doctor:

如果你像我一样,提示需要接受某些许可证,则可按照提示,运行命令:

1
flutter doctor --android-licenses

之后再次运行flutter doctor,就不会再报错了。

其他命令:

1
2
3
4
5
# 卸载已安装的组件
sdkmanager --uninstall

# 更新已安装的组件
sdkmanager --update

Visual Studio

Visual Studio是用来开发Windows应用必备的IDE,但我目前只打算开发移动端应用,暂时不涉及Windows应用的开发,所以可以运行如下命令来忽略Windows开发的检查:

1
2
3
4
5
6
7
8
# 查看 config 参数的使用
flutter config -h
# 发现:
# --[no-]enable-windows-desktop    
# Enable or disable support for desktop on Windows.

# 所以可以这样设置:
flutter config --no-enable-windows-desktop

后续如果想要再次开启,可以运行如下命令:

1
flutter config --enable-windows-desktop

VSCode配置

插件安装

利用VSCode开发flutter应用,首先我们需要安装flutter和Dart插件。扩展市场搜索flutter即可,它会自动帮我们装上两个插件:

配置模拟器

参阅官方文档新建一个flutter应用,你可以选择一个虚拟环境来运行,也可以使用真机调试。这里我们选择模拟器运行:

你可以使用第三方模拟器(蓝叠、夜神等),也可以使用Google提供的工具。

首先配置环境变量,在用户变量中新增两个:

1
2
$env:PUB_HOSTED_URL="https://pub.flutter-io.cn"
$env:FLUTTER_STORAGE_BASE_URL="https://storage.flutter-io.cn"

接着用sdkmanager安装必要的模拟器组件:

1
2
3
4
5
6
7
8
# 在VScode中开发flutter应用时,构建Android 模拟器
sdkmanager.bat --install emulator

# AVD system images
sdkmanager.bat --install "system-images;android-34;google_apis_playstore;x86_64"

# 英特尔硬件加速执行管理器 
sdkmanager "extras;intel;Hardware_Accelerated_Execution_Manager"

之后就可以在vscode中看到模拟器设备了。再点击运行即可,首次启动它会自动帮我们安装所需的组件,后续就会快很多。

References

flutter中文站官方安装说明

sdkmanager的使用

使用vscode搭建flutter开发环境

在中观环境下使用flutter

Licensed under CC BY-NC-SA 4.0
我的玫瑰,种在繁星中的一颗~
Built with Hugo
主题 StackJimmy 设计