目标

在 Windows 下,搭建 Flutter 运行的 Android 的环境。 详情参考:https://flutter.dev/

基础环境

Git Flutter 依赖Git 命令行工具

如果未安装 Git for Windows,请先安装; 如果已安装 Git for Windows,请确保命令提示符或 PowerShell 中可运行 git 命令

VS Code 首先安装 VS Code 编辑器。 下载地址:https://code.visualstudio.com/

在 VS Code 中,安装 flutter 插件 安装完成 VS Code 后,在 VS Code 中安装 flutter 插件。操作步骤如下图:

Extension => 搜索框中搜 flutter => 安装 Flutter 插件

flutter ios适配安全区 flutter ios windows_flutter ios适配安全区

配置资源镜像

由于在国内访问 Flutter 有时可能会受到限制,Flutter 官方为中国开发者搭建了临时镜像,大家可以将下面的资源地址加入到环境变量中:

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

JDK

Android Studio

Flutter SDK

下载

直接下载 下载地址:

  • https://flutter.dev/docs/development/tools/sdk/releases
  • https://flutter.cn/docs/development/tools/sdk/releases(国内镜像地址)通过 Git 下载 下载之前,先指定 flutter 的存放位置。例如 D 盘。然后通过以下命令获取 Flutter SDK
git clone -b master https://github.com/flutter/flutter.git

解压

将安装包 zip 解压到你想安装 Flutter SDK 的路径(如:D:\flutter;注意,最好不要放到 C 盘)。

flutter ios适配安全区 flutter ios windows_flutter ios适配安全区_02

执行 flutter 命令

执行 flutter 命令有两种方式(二选一):

  • 通过flutter_console.bat打开命令行 然后在命令行中运行 flutter 命令
  • 绑定环境变量(推荐) 将 flutter 的执行路径,绑定到环境变量中。然后在任意打开的命令行中,都能运行 flutter 命令接下来,我们分别介绍这两种方式
  1. 在 flutter 安装目录下找到flutter_console.bat 我本地路径是 D:\flutter\flutter_console.bat,如下图: 双击运行,接下来,你就可以在命令行中运行 flutter 命令了。启动后的效果如下图:
  2. 绑定环境变量如果你想在任何命令行中,都可以执行flutter命令(不是通过双击 flutter_console.bat 的方式运行flutter 命令),你需要把 flutter 的执行路径,配到环境变量中 例如:我们本地 flutter 的执行路径是D:\flutter\bin 然后,将D:\flutter\bin添加到环境变量中。

除了 flutter 命令需要绑定环境变量,还有以下常用内容

  • 将 Dart SDK 的执行路径绑定到环境变量中。绑定方式与上面一致
#我本地的路径
D:\flutter\bin\cache\dart-sdk\bin

上述路径下包含以下常用命令(在环境变量中添加上述路径后,你就可以在命令行中使用下列命令)

  • dart 用来运行 Dart 程序
  • dart2js 将 Dart 代码,转成 JavaScript 代码
  • dart2native 将 Dart 代码提前编译(AOT)为原生 X64 机器码。支持 Windows, macOS 和 Linux
  • dartdoc 为 Dart 程序生成文档
  • dartfmt 格式化 Dart 程序
  • pub 使用 Dart 生态(相当于 JavaScript 中的 npm 命令)
  • flutter ios适配安全区 flutter ios windows_flutter ios适配安全区_03

  • 将 pub 全局组件的执行路径绑定到环境变量中(我们下载的 pub 包的命令)pub 是管理 Dart 包的工具(相当于 JavaScript 中的 npm),负责管理维护 Dart 生态。
#我本地的路径
D:\flutter\.pub-cache\bin

绑定环境变量的方式与 flutter 一致。如下图:

flutter ios适配安全区 flutter ios windows_flutter ios适配安全区_04

检测 flutter 在命令行中,运行 flutter doctor ,可以检测 flutter 所需的环境条件是否都满足。一般来说,会有一些问题。

我本地运行,有三个问题需要解决(没问题的有一个绿色的对号,有问题的是叉号X 或感叹号!)

flutter ios适配安全区 flutter ios windows_vscode_05

接下来,我们依次解决上述三个问题

  • Some Android licenses not accepted 这个在命令行中,直接给出了解决方案:运行 flutter doctor --android-licenses运行过程中,所有问题的答案都输入 y 执行完后,再次运行 flutter doctor,此时,第一个问题已经解决
  • 缺少插件 Flutter plugin not installed; this adds Flutter specific functionality. Dart plugin not installed; this adds Dart specific functionality.
  • 先在 Android Studio 中安装 Flutter 插件(参考下一节:安装 Flutter 插件) 安装完成后,再次运行 flutter doctor。如果运行通过,则无需看下一步
  • 如果已经安装了 Flutter 插件,但是还报错。则用以下方式解决: 将 flutter 切换到 beta 分支(目前稳定版是1.22.5),beta 最新版是1.25.0-8.1.pre)
#切换分支
flutter channel beta

#升级版本
flutter upgrade

#重新检测
flutter doctor
  • 此时第二个问题,也已经解决
  • No devices available(没有可用设备) 我们启动模拟器后,这个问题就解决了。启动模拟器有多种方式。具体操作如下:

创建 Flutter 项目 有多种方式创建 Flutter 项目。实际项目中,人选一个即可

  • 通过命令行创建
  • 通过 Android Studio 创建
  • 通过 VS Code 创建(推荐)

接下来我们依次介绍。

通过命令行创建

新建 创建语法是:flutter create 项目名称 在命令行中,运行如下命令

flutter create flutter_app

项目创建后,通过 VS Code 打开项目

修改国内镜像源

修改镜像源只需要改一次,再次启动时,无需再改 国内特有的问题,防止启动应用时,访问不到 google 等国外资源

在运行 flutter 项目之前,需要先修改运行项目必须的资源路径。需要改两个文件

  • flutter项目/android/build.gradle
  • Flutter SDK 包下的 flutter.gradle 文件

接下来,我们依次介绍。

修改文件flutter项目/android/build.gradle,把 google() 和 jcenter() 这两行去掉。改为阿里的链接。

阿里云镜像详情:https://maven.aliyun.com/mvn/guide

maven{url'https://maven.aliyun.com/repository/google'}
maven{url'https://maven.aliyun.com/repository/jcenter'}
maven{url'https://maven.aliyun.com/repository/public'}

flutter ios适配安全区 flutter ios windows_命令行_06

修改 Flutter SDK 包下的 flutter.gradle 文件。我本地把 Flutter SDK 解压到了 D:\flutter。所以,我本地 flutter.gradle 的路径是:

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

注意:一定要改成你本地的路径

打开上述文件,然后编辑

flutter ios适配安全区 flutter ios windows_命令行_07

flutter ios适配安全区 flutter ios windows_vscode_08

flutter ios适配安全区 flutter ios windows_vscode_09

其中比较有用的命令有:

  • p 键:显示网格
  • o 键:切换 Android 和 iOS 的预览模式

通过 Android Studio 创建

新建

重启后,点击 File => New 后面会出现 New Flutter Project(必须先安装 Flutter 插件,然后才能看到此菜单)

flutter ios适配安全区 flutter ios windows_命令行_10

点击新建,然后会看到如下页面

flutter ios适配安全区 flutter ios windows_vscode_11

点击 Next设置项目名称(项目名称中的字母只能用小写),选择 Flutter SDK

flutter ios适配安全区 flutter ios windows_vscode_12

点击 Next,Android Studio 会根据我们填写的 Project name 帮我们生成 Package name。

这里无需改动,点击 Finish

flutter ios适配安全区 flutter ios windows_vscode_13

此时会看到 Creating Flutter Project,等待几分钟

flutter ios适配安全区 flutter ios windows_windows_14

创建完成后的效果

flutter ios适配安全区 flutter ios windows_flutter ios适配安全区_15

flutter ios适配安全区 flutter ios windows_windows_16

flutter ios适配安全区 flutter ios windows_flutter_17

修改 Flutter SDK 包下的 flutter.gradle 文件。我本地把 Flutter SDK 解压到了 D:\flutter。所以,我本地 flutter.gradle 的路径是:

flutter ios适配安全区 flutter ios windows_vscode_18

启动

我们现在项目中启动模拟器,模拟器启动后我们可以点选启动按钮,启动 Flutter 项目

flutter ios适配安全区 flutter ios windows_windows_19

启动中

flutter ios适配安全区 flutter ios windows_windows_20

启动完成

flutter ios适配安全区 flutter ios windows_flutter_21

通过 VS Code 创建新建

打开 VS Code 后,通过快捷键Ctrl + Shift + P打开命令行

flutter ios适配安全区 flutter ios windows_flutter ios适配安全区_22

在命令行中输入 flutter,然后点选New Application Project

flutter ios适配安全区 flutter ios windows_vscode_23

然后,在弹出窗口中,创建一个新目录来保存新创建的 flutter 项目。

目录名称不要写汉字和特殊字符。最好用小写字母和下划线

flutter ios适配安全区 flutter ios windows_vscode_24

指定项目名称

flutter ios适配安全区 flutter ios windows_flutter_25

回车后,VS Code 就会在我们指定的目录下,创建 flutter 项目

flutter ios适配安全区 flutter ios windows_vscode_26

修改国内镜像源

flutter ios适配安全区 flutter ios windows_flutter_27

flutter ios适配安全区 flutter ios windows_命令行_28

修改 Flutter SDK 包下的 flutter.gradle 文件。我本地把 Flutter SDK 解压到了 D:\flutter。所以,我本地 flutter.gradle 的路径是:

flutter ios适配安全区 flutter ios windows_flutter_29

修改后,保存

flutter ios适配安全区 flutter ios windows_windows_30

flutter ios适配安全区 flutter ios windows_命令行_31

flutter ios适配安全区 flutter ios windows_命令行_32