【Flutter 基础】环境及配置

林小帅
938 阅读4分钟

注：本文从个人公众号（岛前屿端）中迁移重新发布

Flutter 是谷歌的移动 UI 框架，可以从单个代码库快速的为移动端(iOS & Android)、Web、桌面端、嵌入式设备上构建高质量的原生用户界面和应用程序。

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

基本环境以及配置

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

系统要求：

  • 操作系统: Windows 7 或更高版本 (64-bit)
  • 磁盘空间: 400 MB (不包括 Android Studio 的磁盘空间)。

环境：

  • Flutter SDK
  • Android 套件

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

工具:

  • Git for Windows (Git 命令行工具)

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

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

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 目录配置到系统环境变量中。

PATH=xxx\flutter\bin

命令与环境检查

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

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

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

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

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

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

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

flutter doctor

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

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

image.png
（Flutter 环境检查）

Flutter 环境检查：

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

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

Hello Demo

通过 flutter create <project name> 命令可以直接初始化一个项目

flutter create myapp

稍等一会儿，项目就创建完成了。项目创建完成后需要进入项目目录。

cd myapp

这时就可以看到项目目录结构了。

如果需要连接 真机 or 虚拟机，那么就需要通过 flutter devices 来检查设备信息。

flutter devices

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

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

flutter run

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

image.png

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

image.png
（flutter demo - Android）

Error running Gradle

但是！！！很不幸，你可能大概率会报错！！！别问为什么！！！ （由于众所周知的原因，你懂的！）

你看到的结果会是这样👇

image.png

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

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

替换镜像仓库

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

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

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

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

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

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' }

image.png
（替换仓库镜像）

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

祝各位神仙大佬们 build 一次过。如果尝试了很多次还是有问题，请你取关吧，我不认识你

总结

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

参考

avatar
文章
阅读
粉丝