【自种树自乘凉】Flutter 搭建开发环境

pany
618 阅读3分钟

本文已参与掘金创作者训练营第三期「高产更文」赛道，详情查看：掘力计划｜创作者训练营第三期正在进行，「写」出个人影响力。

提前说

  • 本文仅为 Windows 下搭建 Flutter 的 Android 开发环境教程
  • 本文三个核心：代码编辑器 & Flutter SDK（内含 Dart SDK） & Android SDK

正文

1. 添加环境变量（国内镜像）

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

备注：Linux下直接运行以上两条命令，Windows下需手动添加

2. 配置 Git 环境

下载地址：git-scm.com/download/wi…

备注：Flutter 需要 Git 环境的支持，直接下载安装即可

3. 配置 Java 环境

这个步骤当前不是必须的，如果有需要的话就去这个链接下载 JDK 包（一般 8.0 的版本就行）

下载地址：www.oracle.com/java/techno…

"在后期，打包 apk 的时候，需要创建密钥库用于 app 签名时需要 JDK 的环境"

配置环境变量等等步骤，这里默认你会，不会的话，就上网搜索：“配置 Java 环境”

4. 下载 Flutter SDK

下载地址：flutter.dev/docs/get-st…

注意：不要将文件放在高权限的路径下，如 C:\Program Files\ ，并且要保证路径为全英文。

在 flutter 文件下找到 flutter_console.bat，双击运行并启动 flutter 命令行，接下来，你就可以在 flutter命令行运行 flutter 命令了。

比如：

flutter doctor

5. 配置环境变量

如果你想在 Windows 系统自带命令行运行 flutter 命令，需要添加以下环境变量到用户 PATH：

export PATH = D:\flutter\bin

注意：D:\flutter\bin 为我的安装目录，你必须根据你的 Flutter SDK 目录为准。

6. 安装 Android Studio

安装它的目的不是为了强制让你用它编写代码，我们主要目的是获取 Android Studio 里面自带的最新版 Android SDK！

下载地址：www.androiddevtools.cn/

7. 检查环境

在命令行中运行：

flutter doctor

运行结果如下表示全部配置完成：

image.png

但是这篇文章到这里我们只完成了图上 4 项中的前 3 项（FLutter SDK、Android SDK、Android Studio），第 4 项为 Android 虚拟机，这个等我们运行程序的时候再创建并启动它。

注意：图中有出现 ! 为警告，不会影响程序的运行。如果出现 x 就说明环境不对，需要正对性修正。

比如安装好 Android Studio 后缺少安卓证书，会提醒你需运行：

flutter doctor --android-licenses

你只需要对症下药，直到运行 flutter doctor 命令不会出现 x 符号！

8. 安装插件

启动 Android Studio，进入Plugins（File > Settings > Plugins）搜索 Flutter，并安装 Flutter 插件

9. 创建项目

启动 Android Studio > File > New Flutter Project

10. 安装虚拟机

点击 Android Studio 中的上方菜单tool - AVD Manager 选项 > 选择 Create Virtual Device >选择虚拟机类型 > 选择安卓系统版本（一般选 9.0 以上） > 启动虚拟机

image.png

11. 运行项目

如果运行失败，原因很有可能如下：

修改掉项目下的 android 目录下的 build.gradle 文件，把 google() 和 jcenter() 这两行去掉。改为阿里的链接。如图：

buildscript {
    repositories {
        //  google()
        //  jcenter()
        maven { url 'https://maven.aliyun.com/repository/google' }
        maven { url 'https://maven.aliyun.com/repository/jcenter' }
        maven { url 'http://maven.aliyun.com/nexus/content/groups/public'}
        }
        dependencies {
        classpath 'com.android.tools.build:gradle:3.1.2'
    }
}

allprojects {
    repositories {
        // google()
        // jcenter()
        maven { url 'https://maven.aliyun.com/repository/google' }
        maven { url 'https://maven.aliyun.com/repository/jcenter' }
        maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }
    }
}

修改 Flutter SDK 包下的 flutter.gradle 文件（......flutter\packages\flutter_tools\gradle\flutter.gradle），如图：

repositories {
        //google()
        //jcenter()
	maven { url 'https://maven.aliyun.com/repository/google' }
        maven { url 'https://maven.aliyun.com/repository/jcenter' }
        maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }
}

12. 改用 vs code

如需将代码编辑器改用 vs code 我们只需要为 vs code 配置名为 Flutter 和 Dart 的插件，并且将刚才创建的虚拟机启动起来即可。

一键启动虚拟机的方法：

新建一个 .bat 文件，写入：

emulator.exe的路径 -netdelay none -netspeed full -avd 之前创建的虚拟机名称

我的如下：

C:\Users\pc\AppData\Local\Android\Sdk\emulator\emulator.exe -netdelay none -netspeed full -avd Nexus_6P_API_29

然后双击即可启动虚拟机，再不用先启动 Android Studio了。

avatar
文章
阅读
粉丝