Flutter 环境及配置

2019-09-09 11:59:40 浏览数 (1)

Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。

【Flutter 中文网】https://flutterchina.club/ 

Windows、macOS、Linux 也有不同系统安装说明

因为我使用的 Windows 系统，所以这里以 Windows 系统为例。

  • 操作系统: Windows 7 或更高版本 (64-bit)
  • 磁盘空间: 400 MB (不包括Android Studio的磁盘空间)。
  • 工具: Flutter 依赖下面这些命令行工具。
    • Git for Windows (Git命令行工具)

关于 Flutter 中文网，其中提到可以使用 Flutter 官网提供的 SDK 安装包。

注意：但我在尝试使用 Flutter SDK 的安装包来运行项目会产生错误，所以还是建议通过 GitHub 的方式将 Flutter 项目 clone 下来。

首先是将此配置加入到系统环境变量中：

代码语言：javascript复制
PUB_HOSTED_URL=https://pub.flutter-io.cn
FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

注意：由于一些 flutter 命令需要联网获取数据，如果您是在国内访问，由于众所周知的原因，直接访问很可能不会成功。

PUB_HOSTED_URL

FLUTTER_STORAGE_BASE_URL

是 google 为国内开发者搭建的临时镜像。

详情请参考 Using Flutter in China

在完成以上配置以及从 GitHub 上 clone flutter 项目之后，再将 flutter 文件夹下 bin 目录配置到系统环境变量中。

【GitHub 地址】https://github.com/flutter/flutter

代码语言：javascript复制
PATH=xxxflutterbin

这时候打开一个新的命令行窗口就可以在命令行中使用 flutter 命令了。

（点击查看大图 flutter 命令输出）（点击查看大图 flutter 命令输出）

如能出现以上命令行说明，那就证明你已经正确的配置了 Flutter 环境了。

在这里我有一个不成熟的建议：

  1. 如果未出现，请回到文章开头再来一遍。
  2. 如三遍后还是未出现，请重启电脑。
  3. 如重启后再尝试三遍还无出现以上内容。

少侠我看你骨骼精奇，这本秘笈我就10……

算了，免费送你了。

我真的 ball ball 你，请珍惜生命和头发吧！！！

当然一切正常的话

这时候就可以打开 VS Code 在插件商店中输入 flutter 安装支持扩展。

安装此扩展插件后会自动安装 Dart SDK 和 相关支持扩展。

等待完成后，重启 VS Code 扩展插件就能正常工作了。

当以上步骤都能正确执行后，在命令行中输入

代码语言：javascript复制
flutter doctor

这个命令按官方说明：第一次运行这个命令时，它会下载自己的依赖并自行编译，以后再运行时就会快很多。

但是！！有一点官方并没太详细说明，就是它会检查与之相关的 环境配置信息、相关的 SDK、以及相关 IDE 的安装环境。

  • Flutter 环境
  • Android 开发环境 以及 Android SDK
  • Visual Studio 开发工具 和 环境（非必须，有更好）
  • Android Studio IDE（非必须，有更好）
  • Connected device（连接的设备：真机 或 虚拟机）

OK，当 flutter doctor 检测没有明显的错误后，就可以考虑创建一个 flutter 项目了。

代码语言：javascript复制
flutter create myapp

稍等一会儿，项目就创建完成了。

然后进入项目目录

代码语言：javascript复制
cd myapp

你就可以看到项目目录结构了

这时候你就要连接 真机 or 虚拟机，然后命令行输入

代码语言：javascript复制
flutter devices

一切正常的情况下，该命令会检查设备，并且将设备信息显示输出在命令行中。

然后，就让我们把项目跑起来吧！

代码语言：javascript复制
flutter run

稍等一会……一会……一会……

如果一切正常，那么在设备上就会看到 flutter create 的一个 demo 了。

（flutter demo - Android）（flutter demo - Android）

但是！！！

很不幸，你可能大概率会报错！

别问为什么！

（由于众所周知的原因，你懂的！）

你看到的结果会是这样

首先！不要惊慌，不要害怕！把毛巾打湿捂住口鼻，压低或蹲下身子有序逃……

emmmmm……不好意思，走错片场了。

主要原因还是因为无法连上国际互联网，导致无法获取相关的包信息。

没关系，找到你 clone 的 flutter 项目文件夹，然后进入

Flutter->packages->flutter_tools->gradle 找到 flutter.gradle 文件。

将 buildscript -> repositories 下的 google()、jcenter() 两个方法进行注释。

然后添加阿里云（aliyun）提供的 maven 仓库镜像进行替换

代码语言：javascript复制
maven{ url 'https://maven.aliyun.com/repository/google' }
maven{ url 'https://maven.aliyun.com/repository/gradle-plugin' }
maven{ url 'https://maven.aliyun.com/repository/jcenter' }
maven{ url 'https://maven.aliyun.com/repository/public' }
（替换仓库镜像）（替换仓库镜像）

然后再次执行 flutter run 命令就可以看到正常执行的 flutter 项目 demo 了

祝各位神仙大佬们 build 一次过。

如果尝试了很多次还是有问题，请你取关吧，我不认识你

总结：

  • 官方文档是你入门的好帮手，请务必认真阅读。
  • 认真分析和总结问题的所在。
  • 有时候重启也是可尝试的方法之一。
flutter ios windows android androidstudio

0 人点赞