[移动开发]Flutter 之 Windows 环境搭建

目标

在 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 有时可能会受到限制，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 命令
执行 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 命令）
    

• 将 pub 全局组件的执行路径绑定到环境变量中（我们下载的 pub 包的命令）

  pub 是管理 Dart 包的工具（相当于 JavaScript 中的 npm），负责管理维护 Dart 生态。

  #我本地的路径
  D:\flutter\.pub-cache\bin
  

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

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

我本地运行，有三个问题需要解决（没问题的有一个绿色的对号，有问题的是叉号X 或感叹号！）

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

• 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 SDK 包下的 flutter.gradle 文件。我本地把 Flutter SDK 解压到了 D:\flutter。所以，我本地 flutter.gradle 的路径是：

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

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

打开上述文件，然后编辑



其中比较有用的命令有：

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

通过 Android Studio 创建

新建
重启后，点击 File => New 后面会出现 New Flutter Project（必须先安装 Flutter 插件，然后才能看到此菜单）

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

点击 Next

设置项目名称（项目名称中的字母只能用小写），选择 Flutter SDK

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

这里无需改动，点击 Finish

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

创建完成后的效果



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

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

启动中

启动完成

通过 VS Code 创建

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

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

然后，在弹出窗口中，创建一个新目录来保存新创建的 flutter 项目。
目录名称不要写汉字和特殊字符。最好用小写字母和下划线

指定项目名称

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

修改国内镜像源


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

修改后，保存