目标
在 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 命令接下来,我们分别介绍这两种方式
- 在 flutter 安装目录下找到flutter_console.bat 我本地路径是 D:\flutter\flutter_console.bat,如下图: 双击运行,接下来,你就可以在命令行中运行 flutter 命令了。启动后的效果如下图:
- 绑定环境变量如果你想在任何命令行中,都可以执行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 的路径是:
修改后,保存