技术知识库

主题

环境搭建 ​

中文文档：https://book.flutterchina.club/chapter1/install_flutter.html

官方中文文档：https://flutter.cn/docs/get-started/install/windows

API 接口：https://www.wanandroid.com/blog/show/2

一、工具 ​

Git for Windows

java 的 jdk

二、安装 Flutter SDK ​

1. 下载安装包 ​

网址：https://flutter.cn/docs/get-started/install/windows

下载完成后，解压到 D:\src

目前版本：flutter 3.3.10 Dart 2.18.6

2. 配置环境变量 ​

（1）增加系统变量

新建变量名 FLUTTER_HOME，变量值：D:\src\flutter\bin

（2）增加用户变量

在 Path 下新增 %FLUTTER_HOME%

（3）点击保存，重启 cmd

输入 flutter，可以看到 flutter 指令已经生效

3. 配置 Flutter 镜像 ​

在用户变量中增加：

text
PUB_HOSTED_URL：https://pub.flutter-io.cn
FLUTTER_STORAGE_BASE_URL：https://storage.flutter-io.cn

地址为临时镜像，并不能保证一直可用，参考 https://flutter.io/community/china

三、配置 VS Code ​

（1）在扩展中安装 flutter 与 dart 以及 Flutter widget Snippets，安装完成后重启 vscode

（2）在编辑器的左下角的设置进入「命令面板」，在命令面板中点击 flutter: new project

（3）选择创建的类型 Application，再输入创建的项目名称，按 enter

四、安装 Android Studio ​

下载地址：https://developer.android.google.cn/studio

初次启动会报 unable to access android sdk add-on lis 错误，这是因为没有安装 Android SDK，先点击 cancel，进入后再去安装 Android SDK

1. 安装 Android SDK ​

打开 File > New > New flutter project

选择左侧的 Android，安装 Android SDK

2. 安装 Flutter 和 Dart 插件 ​

（1）启动 Android Studio

（2）打开插件偏好设置（File > Setting > Plugins）

由于网络问题，可能有几次失败，搜索 flutter，并安装；这时 flutter 与 Dart 会一并安装完成

（3）安装完成后重启 Android Studio

3. 安装模拟器 ​

（1）在 Android Studio 中的 Tools 中选择 Device Manager

（2）点击 Create Virtual Device

（3）选择默认的 Pixel 2 点击 Next

（4）select a system image，选择默认点击下载小图标

（5）安装完成后点击下一步，重启 Android Studio

但是 Android Studio 比较吃电脑资源，可以使用其他模拟器。下载地址：https://www.yeshen.com/

五、执行 flutter doctor 检验环境 ​

首次执行 flutter doctor 如果有报错，根据报错去解决，列举以下常见错误

等没有问题了，再运行 flutter run

1. 问题：cmdline-tools component is missing ​

在 Android SDK 目录安装 cmdline-tools

2. 问题：Android license status unknown ​

执行 flutter doctor --android-licenses，输入 y 回车确认即可

3. 问题：Visual Studio - develop for Windows ​

由于不开发 Windows app 应用，该错误暂不处理

六、配置 Maven 镜像 ​

上面运行 flutter run 时，会一直卡着 Running Gradle task 'assembleDebug'...

解决方案：增加三个 maven 映射地址

projectName/android/build.gradle（给新建的项目也配置镜像）：

groovy
buildscript {
    ...
    repositories {
        maven { url 'https://maven.aliyun.com/repository/google' }
        maven { url 'https://maven.aliyun.com/repository/central' }
        maven { url 'https://maven.aliyun.com/repository/public' }
        google()
        mavenCentral()
    }
}

allprojects {
    repositories {
        maven { url 'https://maven.aliyun.com/repository/google' }
        maven { url 'https://maven.aliyun.com/repository/central' }
        maven { url 'https://maven.aliyun.com/repository/public' }
        google()
        mavenCentral()
    }
}

D:\src\flutter\packages\flutter_tools\gradle\flutter.gradle：

groovy
buildscript {
    repositories {
        maven { url 'https://maven.aliyun.com/repository/google' }
        maven { url 'https://maven.aliyun.com/repository/central' }
        maven { url 'https://maven.aliyun.com/repository/public' }
        google()
        mavenCentral()
    }
}

七、启动项目 ​

新建项目：

bash
flutter create demo

1. 使用虚拟机 ​

在 Android studio 中启动虚拟机

重新打开 vscode，看右下角是否连接到虚拟机上

也可以 ctrl+shift+p 输入 Flutter Select Device 手动选择模拟器

运行：

bash
flutter run

2. 使用 chrome ​

由于虚拟机太耗内存，可以先在 chrome 中调试开发

将设备切换到 chrome

运行：

bash
flutter run -d chrome

八、连接 Android 真机设备 ​

1. 启用开发者选项和 USB 调试 ​

在设置，关于手机中找到版本号，连续点击 7 次，会进入开发者模式；然后回退一下，在系统和更新中有个开发者选项，然后开启 USB 调试（华为手机要关闭掉监控 ADB 安装应用选项）

2. 用 USB 连接电脑 ​

使用 USB 将手机插入电脑。如果设备出现调试授权提示，请授权你的电脑可以访问该设备；如果没有出现授权提示，需要在电脑中选择 CD 驱动器：Honor Suite，点击安装荣耀手机助力安装向导

3. 验证设备 ​

在 vscode 命令行运行 flutter devices 命令以验证 Flutter 识别您连接的 Android 设备

text
荣耀v40轻奢版:ALA AN70 (mobile) • AUWXVB1305005306 • android-arm64 • Android 12 (API 31)

在 Android Studio 的 tools 下 SDK manager 中下载对应的 SDK，这里 API 为 31，我们下载相应的 API

4. 再次检测 ​

使用 flutter doctor 检测是否还有问题

5. 运行启动 ​

bash
flutter run

九、vscode 上的一些 flutter 命令 ​

  • r：热重载
  • R：重新编译
  • o：切换模式（IOS 与 Android）

十、UI 调试 ​

使用 andriod studio 运行完项目后，点击 Flutter inspector，然后在浏览器中打开就可以调试了

使用参考：https://juejin.cn/post/7056305998629175327#comment