Skip to content

Flutter 开发环境配置

Flutter 官网的 Flutter SDK:Flutter SDK releases | Flutter

官网环境安装教程:视窗安装 |扑动 (flutter.dev)

中文官网 文档Flutter: 为所有屏幕创造精彩 - Flutter 中文开发者网站 - Flutter

一、Windows 系统环境准备

1.安装 Flutter SDK

官网:Flutter - Build apps for any screen

1.Flutter SDK 下载后,可以解压到自己安装 java sdk 的文件夹,或者自定义一个文件夹,不要将 flutter 安装到需要一些高权限的路径,如:C:\Program Files\

  • Flutter SDK 下载地址:Flutter SDK releases | Flutter

    2.配置环境变量:进入 bin 目录,复制路径,在环境变量 path 新建

  • 如:D:\flutter\bin

    3.检测安装是否通过

bash
flutter
# 或
# 检测依赖项和未安装项
flutter doctor

flutter 基于 dart 语言,但Dart SDK已经在打包在Flutter SDK里了,没有必要单独安装Dart

Dart SDK 官网下载:Archive | Dart

如果没有通过的话,按报打 X 的每一个都解决完,才能运行 flutter 项目

同意全部许可协议 :

  • 按照上述提示 , 执行:flutter doctor --android-licenses 命令

  • 同意全部许可协议 , 即可检测通过 ;

    4.配置项目依赖下载链接的系统变量

由于在国内访问 Flutter 有时可能会受到限制,Flutter 官方为中国开发者搭建了临时镜像,将如下环境变量加入到用户环境变量中:

bash
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

或者环境变量配置

2.配置 Android 开发环境

Android Studio 汉化:https://baijiahao.baidu.com/s?id=1734242540910562715&wfr=spider&for=pc

2.1 安装 java JDK

java JDK 下载官网地址(需要登录):Java Downloads | Oracle

没有登录账号的,可以随便注册一个,不过官网正常中国网络 下载非常慢(下载大概 100kb/秒),可以选择镜像网站去下载。

搜索【JRE 8】,下载这个包:jre-8uxxx-自己的系统-xxx.exe

或者在 Java 官网下载https://www.java.com/zh-CN/

下载 jre 包后安装

全部点击下一步,直到安装完成,打开命令行:验证安装是否成功命令

bash
java -version

继续运行:flutter doctor


如果后面运行:flutter doctor --android-licenses 命令报错

bash
Android sdkmanager tool was found, but failed to run
(C:/Users/userHu/AppData/Local/Android/Sdk\cmdline-tools\latest\bin\sdkmanager.bat): "exited code 1".
Try re-installing or updating your Android SDK,
visit https://flutter.dev/docs/get-started/install/windows#android-setup for detailed instructions.

Flutter 项目在对 Android12 进行适配时候,修改了 SDK,build tools 等相关工具版本后,会要求使用 Java11 进行编译。

选择 OpenJDK 的 Java 11 版本下载:Archived OpenJDK GA Releases (java.net)

JAVA_HOME 环境变量

  • 1.打开“控制面板”——>“系统和安全”——>“系统”,然后单击“高级系统设置”链接。
  • 2.单击“环境变量”按钮,然后在“系统变量”列表中找到 “JAVA_HOME” 变量。
  • 3.如果这个变量不存在,请单击“新建”按钮,填入 “JAVA_HOME” 作为变量名,并在变量值输入框中填入 JDK 的安装路径(例如:C:\Program Files\jdk-11)。
  • 4.如果这个变量已经存在,请将其值更改为 JDK 的安装路径,然后单击“确定”按钮。 在 MacOS 或者 Linux 系统中设置 JAVA_HOME 环境变量请参考官方文档。

2.2 安装和配置安卓开发者工具:Android Studio

安卓开发工具官网:Android Studio 功能 | Android 开发者 | Android Developers (google.cn)

下载完后,安装

Android Studio 使用教程:Android Studio 简介 - 我爱学习网 (5axxw.com)

安装完成再继续下面

2.3 配置 Android SDK 的相关环境变量

  • ANDROID_HOME变量是用来告诉一些第三方工具或插件你的 Android SDK 的位置的,比如 Gradle 或 Cordova。如果你不使用这些工具或插件,你可以不设置这个变量。

  • ANDROID_SDK_HOME变量是用来告诉 Android Studio 和模拟器你的 AVD 的位置的,也就是.android目录。如果你不设置这个变量,它会默认使用你的用户目录下的.android目录。如果你想自定义你的 AVD 的位置,你可以设置这个变量。

  • ANDROID_SDK_ROOT 变量。这个变量是用来告诉 Android Studio 和模拟器你的 Android SDK 的位置的。如果没有设置这个变量,你可能会遇到一些问题,比如 Broken AVD system path。

    1.按照以下步骤设置 ANDROID_HOME Android SDK 环境变量:

  • 在 Windows 中,打开“环境变量”对话框,请按 Win + R 并输入“sysdm.cpl”。

  • 在对话框的“高级”选项卡中,单击“环境变量”按钮。

  • 在“系统变量”区域中,单击“新建”按钮。

  • 输入“ANDROID_HOME”作为变量名。

  • 将 Android SDK 根目录的路径添加为变量的值(例如“C:\Users\userHu\AppData\Local\Android\Sdk”)。

  • 单击“确定”来保存更改。

完成后请重新启动终端,或者手动在现有终端中运行以下命令来加载新的环境变量:

bash
setx Android_Home "%ANDROID_HOME%"

2.需要在 Path 环境变量中 , 配置 emulator , platform-tools , tools 地址 格式分别是

  • ;%ANDROID_HOME%\emulator
  • ;%ANDROID_HOME%\platform-tools
  • ;%ANDROID_HOME%\tools\bin
  • ;%ANDROID_HOME%\cmdline-tools\latest\bin

2.4 Android Studio 的虚拟机安装

0.可以在创建项目的 More Actions 中 选择 SDK Maneger 下载安卓虚拟机,就不用再执行下面两步

1.创建一个基于 Java 的安卓项目,等待编辑器底部构建项目的依赖下载完成。

2.然后可以使用 Android Studio 的安卓虚拟机运行 flutter 项目,没安装虚拟机的,先安装虚拟机

  • Android Studio 应用顶部:

    • 没创建过虚拟机:Tools —> Create Virtual Device... —> 下载你想要的虚拟机
    • 已经创建了虚拟机:Tools —> SDK Manger —> Create Device 创建或列表中运行下载好的安卓虚拟机

    3.命令行运行:flutter doctor,如果 android-studio-dir 打 X,便设置路径

bash
# 替换你的Android Studio安装路径
flutter config --android-studio-dir="C:\Program Files\Android\Android Studio"

4.如果命令行运行:flutter doctor 报错

bash
[X] Android toolchain - develop for Android devices
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.

解决:在 Android Studio 中安装 cmdline-tools 组件可以通过以下步骤完成:

  1. 启动 Android Studio。
  2. 点击工具栏中的 "Configure" 按钮,然后选择 "SDK Manager"。
  3. 在 SDK Manager 中,选择 "Android SDK" 选项卡。
  4. 在 "SDK Platforms" 中选中所需的 Android 版本及其依赖组件。
  5. 在 "SDK Tools" 中找到 Android SDK Command-line Tools (latest),选中最新的版本进行安装。
  6. 单击 "Apply" 按钮,完成安装过程。

注意:如果您已经使用 Flutter 安装了 Android SDK,请确保安装的版本是最新的,否则您可能需要手动更新 Android SDK。此外,如果您已将 Android SDK 安装到非默认位置,请确保设置了正确的路径。您可以通过在 Flutter 配置文件中设置正确的 android-sdk 路径来解决此问题。

如果还是不行,那就手动安装,在 Android SDK 的安装目录中

bash
C:/Users/userHu/AppData/Local/Android/Sdk/tools/bin/sdkmanager --install "cmdline-tools;latest"

还是不行的话,设置Path环境变量

  • 1.找到“系统变量”中的“Path”变量,并单击“编辑”按钮。
  • 2.单击“新建”按钮,并添加 Android SDK 的路径。
  • 在大多数情况下,Android SDK 的路径是 C:\Users\您的用户名\AppData\Local\Android\sdk。如果安装 Android Studio 时指定了不同的路径,则可能会有所不同。请查找您的 Android/sdk 目录,并在“路径”列表中添加该目录的位置。

还是不行,亲自设置 SDK 的路径

bash
flutter config --android-sdk "C:/Users/userHu/AppData/Local/Android/Sdk"
# 或
flutter config --android-sdk C:/Users/userHu/AppData/Local/Android/Sdk

如果报 以下错误

bash
[!] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
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.

命令行运行:flutter doctor --android-licenses

也可以使用第三方模拟器运行 flutter 项目,继续看下面

不能启动安卓模拟器错误:Device Manager The emulator process for AVD Pixel 6 API 30has terminated. 解决:Error while waiting for device: The emulator process for AVD Pixel*API_30 has terminated.*振华 OPPO 的博客-CSDN 博客

3 VS Code 编辑器环境(主要是使用该编辑器开发)

3.1.搜索安装 FlutterDart 插件扩展

flutter 相关扩展

3.2.安卓模拟器配置连接

夜神模拟器
  • 1.先配置安装目录的 bin 文件夹的环境 path 变量,例子:D:\SoftWare\Nox\bin

  • 2.打开运行夜神模拟器,配置与 vscode 的连接

    • 找到安装目录的 bin 目录 ,在该目录打包 cmd 命令行

    • bash
      nox_adb.exe connect 127.0.0.1:62001
    • cmd 终端里建立连接

    • bash
      adb connect 127.0.0.1:62001
  • 无法连接问题:

    • 安卓 SDK 和模拟器 adb 版本不统一
    • 1.进入 Android SDK 下的 platform-tools 目录
    • 2.将 adb.exe 拷贝至夜神 bin 目录下,粘贴两个,一个改成 nox_adb.exe,把原来的 nox_adb.exe 删掉。
    • 3.win+r,输入 cmd,cmd 里面nox_adb connect 127.0.0.1:62001(也可以在刚刚的文件夹下面,直接在上面的路径里面输入 cmd)
    • 4.如果 62001 端口用不了就换一个。
逍遥模拟器

待定

3.3. VS Code 编辑器创建和运行 flutter 项目

创建 flutter 项目

bash
flutter create xxx

启动 flutter 项目

bash
flutter run

注意 VScode 的底部--右下角看到 No device 选项,可启动并连接模拟器。

3.4.VS Code 编辑器调试功能 运行调试

待定


最后,再次检测是否完成安装

bash
# 检测依赖项和未安装项
flutter doctor

如果没有通过的话,按报打 X 的每一个都解决完,才能运行 flutter 项目

二、Mac 系统环境准备

官网安装文档:macOS install | Flutter

brew 工具

官网:https://brew.sh/

2.Flutter SDK 的 macOS 安装包

官网 SDK 下载:Flutter SDK releases | Flutter

官网安装文档:macOS install | Flutter

下载完成后,按官网文档自行解压安装

3.配置环境变量

将 Flutter 安装目录的 bin 目录配置到环境变量,注意 bin 目录写自己的目录。

后两行是 Flutter 国内镜像地址,也配置进环境变量里面。

打开终端输入命令: vim ~/.bash_profile

进入后默认不能编辑的,按下I,开始编辑。

当然你想用 open ~/.bash_profile 来进入文件进行编辑可是可以的。

bash
export PATH="/Users/apple/flutter_mac/flutter/bin:$PATH"
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_UUL=https://storage.flutter-io.cn

编辑完成后,按“Esc”,再按“:wq”,保存文件。

然后更新文件,终端输入命令: source ~/.bash_profile

这个时候应该能运行 flutter 命令了,我们运行命令行:flutter -h, 会有一大堆的提示信息,如果没有提示,上面步骤重复操作。

运行flutter doctor,看哪些没有完成安装

3.配置 iOS 开发环境(XCode 编辑器)

在 App Store 中安装 Xcode,有的话不用重复安装。

安装完成后继续下面操作

3.1 在命令行中安装 ios tool 的配置项

下面的命令可以使用:flutter doctor 命令查看 打 X 未通过,提示需要安装的命令

bash
brew update
brew install --HEAD usbmuxd
brew link usbmuxd
brew install --HEAD libimobiledevice
brew install ideviceinstaller
brew install ios-deploy

安装完成 XCode 编辑器之后,命令行再次运行:flutter doctor,看看还需要安装和配置什么。

Xcode 命令

在 pod setup 过程中,如果等待时间非常长,最后还更新失败。 可以选择手动更新:

bash
gem install -n /usr/local/bin cocoapods

git clone https://git.coding.net/CocoaPods/Specs.git ~/.cocoapods/repos/master

该过程作用与 pod setup 作用相同。不过要注意,这个 git 地址最好在浏览器中打开来看一下,项目地址可能会迁移

3.2 启动苹果手机模拟器

bash
Xcode-Open Developer Tool - Simulator

3.3 安装 Android Studio

安装包下载(滑到中间偏下):下载 Android Studio & App Tools - Android Developers (google.cn)

安装文档:安装 Android Studio | Android 开发者 | Android Developers (google.cn)

下载后自行解压安装,启动之前的选项可以点 cancel,直到出现【欢迎界面】。

3.3.1 Android Studio 配置(android sdk、flutter)

之后一路 next,直到最后,点击 finish,下载 android sdk,这个进度条要跑一会,过程有点慢。

下载完成后重新打开 Android Studio, configure ——> pulgin ——> 搜索 flutter 包,然后 install。选择 restart IED,重新打开 Android Studio。

最后命令行运行:flutter doctor,Android Studio 前面有对勾,说明安装成功。

3.3.2 安卓证书

命令窗口中的第二项是安卓相关协议,我们找到 run 后面的那句话, 输入 flutter doctor --android-licenses,之后的协议一路选 y,直到完成。

运行 flutter,这个时候除了 xcode 和 device 都已经完成了。

3.3.3 安卓虚拟机

回到 Android Studio,进入项目,菜单栏 tool ——> AVD Manager,create,选择手机 Nexus 5,安卓版本安装

9.0,安装需要少许等待。

3.3.4 使用 Android Studio 创建 flutter 项目

最最后,可以使用 Android Studio 创建 flutter 项目,创建项目前,需要配置 Flutter SDK 路径、项目名、项目路径、项目描述等。

3.4 VS Code 扩展和创建运行 flutter 项目

1.安装 FlutterDart 插件扩展

2.VS Code 编辑器调试功能 运行调试

cmd 命令行创建新项目

bash
flutter create xxx

运行项目

bash
flutter run

注意 VScode 的底部右下角看到 No device 选项,可启动并连接模拟器。

3.5 运行苹果手机模拟器

命令启动

bash
flutter emulator --launch apple_ios_simulator

3.6 运行项目

bash
flutter run

一、Flutter 命令行

bash
flutter # 查看后面可以接什么命令
flutter doctor # 查看需要安装的依赖
flutter create demo1 # 创建项目
flutter -v # 查看当前版本
flutter version # 查看所有版本
flutter analyze # 分析项目的Dart代码。
flutter run -v # 编译运行
flutter  run # 运行你的Flutter应用程序
flutter stop # 停止在附加设备上的Flutter应用
flutter test # 对当前项目的Flutter单元测试
flutter trace # 开始并停止跟踪运行的Flutter应用程序
flutter upgrade # 升级你的Flutter副本
flutter  build # Flutter构建命令。
flutter channel # 列表或开关Flutter通道
flutter  clean # 删除构建/目录
flutter config # 配置Flutter设置
flutter  devices # 列出所有连接的设备
flutter drive # 为当前项目运行Flutter驱动程序测试
flutter format # 格式一个或多个Dart文件
flutter  fuchsia_reload # 在Fuchsia上进行热重载
flutter install # 在附加设备上安装Flutter应用程序
flutter logs # 显示用于运行Flutter应用程序的日志输出
flutter packages # 命令用于管理Flutter包
flutter  precache # 填充了Flutter工具的二进制工件缓存
flutter screenshot # 从一个连接的设备截图

二、Flutter 模拟器操作 🚀

模拟器操作命令

bash
运行项目:flutter run

模拟器列表:flutter emulators

启动模拟器,只有启动模拟器才可以运行模拟器:flutter emulators --launch <emulator id>
   例如未启动模拟器列表:
    Nexus_5X_API_28 Nexus 5X Google Nexus 5X API 28
    apple_ios_simulator iOS Simulator Apple
    
启动安卓模拟器:flutter emulators --launch Nexus_5X_API_28

运行所有模拟器:flutter run -d all

运行指定模拟器:flutter run -d <deviceId>
 例如模拟器列表:
  Android SDK built for x86 emulator-5554 android-x86 Android 9 (API 28) (emulator)
  xxx的 iPhone 00008020-001838491169002E ios iOS 12.2

运行安卓模拟器:flutter run -d emulator-5554

运行IOS真机:flutter run -d 00008020-001838491169002E

运行所有模拟器:flutter run -d all

运行模拟器过程中命令

bash
热更新刷新:r
热重启刷新:R
退出运行模拟器app:q
切换模拟器系统的效果 (安卓和苹果系统):o

三、Flutter 运行调试

断点调试

在 Flutter 进行断点调试非常简单,只需要在 Vscode 上打上一个断点,按 F5 就会停在断点处。通过左边的调试栏,观察断点处的变量以及栈堆情况。

debugger 调试

使用 debugger API 的方式

dart
import 'dart:developer';

void someFunction(double offset) {
    debugger(when: offset > 30.0, message: 'offset 大于 30 时,中断');
    // ...
}

debugger 代码只会在开发阶段运行

rendering 调试

rendering 即开启布局线,当打开 rendering 时,会在界面上看到一些布局线,以便于修复布局效果。

dart
import 'package:flutter/rendering.dart';

void main() {
    debugPaintSizeEnabled = !true;
    runApp(new MyApp());
}

![rendering 调试](./img/rendering 调试.png)

日志调试

直接使用 print 输出内容即可,在 AS、Vscode 里的控制台/调试控制台都可以看到。

为了方便,定义一个 Debug 类。

dart
class Debug {
    static log(String tag, String text) {
        print('[$tag] $text');
    }
    static info(String tag, String text) {
        print('[$tag] $text');
    }
    static success(String tag, String text) {
        print('[$tag] $text');
    }
    static error(String tag, String text) {
        print('[$tag] $text');
    }
}

运行状态调试

在使用命令:flutter run 时,会有一个 Observatory URL 地址提供(一般为:http://127.0.0.1:8108/),那就是运行状态调试,打开之后可以看到应用的 GC、VM 方面的信息。注意,如果使用 F5 启动,则没有这个功能。

运行状态调试

真机调试

开启真机调试的步骤:

  • 1.打开 开发者选项 还有 USB 调试。
  • 2.使用 USB 将手机连接电脑,若手机出现提示,授权电脑访问手机。
  • 3.在命令执行 flutter devices 确认连接电脑的设备。
  • 4.然后可通过执行 flutter run 运行我们的 app。
  • 5.在手机上开启 USB 调试模式。

真机调试

Android Studio 切换单独运行 android 目录 的项目

四、Flutter 项目目录结构

bash
.dart_tool
 记录了一些dart工具库所在的位置和信息
.idea
 android studio 是基于idea开发的,.idea 记录了项目的一些文件的变更记录
android
 android项目需要打包上架的时候,也需要使用此文件夹里面的文件。同样的如果我们需要原生代码的支持,原生代码也是放在这里
ios
 包含了iOS项目相关的配置和文件,当我们的项目需要打包上线的时候,需要打开该文件内的Runner.xcworkspace文件进行编译和打包工作
lib
 日常开发的dart语言代码都放在这里,可以说是我们的“核心工作文件夹”
test
 存放在项目开发过程中的测试代码,良好的测试习惯是保证代码质量的必要手段,希望大家在test文件里写更多的代码
.gitignore
 git忽略配置文件
.metadata
 IDE 用来记录某个 Flutter 项目属性的的隐藏文件
.packages
 pub 工具需要使用的,包含 package 依赖的 yaml 格式的文件
flutter_app.iml
 工程文件的本地路径配置
pubspec.lock
 当前项目依赖所生成的文件
pubspec.yaml
 当前项目的一些配置文件,包括依赖的第三方库、图片资源文件等
README.md
 自述项目信息(html标签)

五、运行别人的项目

清理

bash
flutter clean

下载包

bash
flutter pub cache repair

flutter packages get

flutter pub get

flutter packages upgrade

重新生成命令生成缺失的自动生成的文件

bash
flutter create .

报错“Invalid plugin specification. Invalid “macos” plugin specification.”

更新 Flutter SDK

bash
flutter upgrade

gradle 版本

bash
\android\gradle\wrapper\gradle-wrapper.properties 里面的 distributionUrl
  distributionUrl=https\://services.gradle.org/distributions/gradle-4.10.2-all.zip // 这里就是你本地的版本

\android\build.gradle 文件夹里面的

如:

bash
dependencies {
    classpath 'com.android.tools.build:gradle:3.2.1' //填写本地版本号
}

通过 flutter packages get 命令下载所有依赖的插件

问题检测解决

问题 1:[X] Windows Version (Unable to confirm if installed Windows version is 10 or greater)

按照以下命令操作

bash
flutter channel
# 选择
flutter channel master
# 更新
flutter upgrade
# 再查看
flutter channel
# 最后看故障是否解决
flutter doctor

问题 2( Android toolchain - develop for Android devices)

Unable to locate Android SDK.(错误详情)

  • 设置 SDK

    bash
    flutter config --android-sdk <SDK绝对地址>
  • 查看 flutter 状态

    bash
    flutter doctor
  • 如果报警告

  • bash
    Indroid toolchain develop Some Android licenses not for Android devices
    (Android SDk version 33.0.1 accepted. To resolve this, run: flutter doctor
    --android-licenses
  • 同意 android 协议

  • bash
    flutter doctor --android-licenses

问题 3(Android Studio (version 2022.1))

  • Unable to find bundled Java version(问题详情)
  • 将 Android Studio 安装目录下的 jre 文件,替换为 jdk 的 jre 文件

问题 4

  • 确保 Flutter 定位到安装的 Android Studio 位置
bash
flutter config --android-studio-dir <android studio安装的绝对地址>

其他

【亲测有效】flutter doctor 常见问题,卡在Running pub upgrade...,HTTP Host Availability ,Visual Studio is missing_visual studio is missing necessary components. ple-CSDN博客

Released under the MIT License.