跨平台方案Flutter入门——开发环境搭建

14
四月
2021

目录

  • 系统配置要求
  • 获取 Flutter SDK
  • 配置环境变量
  • 安装 Android Studio
  • 运行 flutter doctor
    • 1. Anroid 的 SDK 路径
    • 2. 许可未同意
  • Android Studio 安装插件
  • Android Studio 创建第一个 Flutter 应用

Flutter 自2017年诞生以来,目前已经有不少大厂的应用(如微信,QQ等)都接入了 Flutter 方案。由此可见,Flutter 的跨平台方案已经逐渐被市场认可和接受。

Flutter 虽然是跨平台的解决方案,但在开发时是需要 Android 和 IOS 开发环境的,也就是 JDK 、Android SDK、Xcode 等环境配置。

呃,由于经费原因,本文暂以 Windows 环境为例,记录下 Flutter 开发环境搭建的全流程。

系统配置要求

要想安装和运行 Flutter,你的开发环境至少应该满足如下的需求:

  • 操作系统:Windows 7 SP1 或更高的版本(基于 x86-64 的 64 位操作系统)。

  • 磁盘空间:除安装 IDE 和一些工具之外还应有至少 1.64 GB 的空间。

  • 工具:要让 Flutter 在你的开发环境中正常使用,依赖于以下的工具:
    – Windows PowerShell 5.0 或者更高的版本
    – Git for Windows 2.x,并且勾选从 Windows 命令提示符使用 Git 选项。

这些配置以及工具,对开发人员来说应该不是问题,这里不做赘述了。

获取 Flutter SDK

1.下载 SDK——flutter_windows_2.0.4

2.将压缩包解压,然后把其中的 flutter 目录整个放在你想放置 Flutter SDK 的路径中(如 D:\software_work\flutter)

配置环境变量

1.Flutter 运行路径。如果要在 Windows 的 CMD 窗口中运行 Flutter 命令,需要将 Flutter 的运行文件路径加入到 PATH 环境变量。

打开 环境变量 设置,在 用户变量 一栏的 Path 变量中,填入刚刚解压的 SDK 的bin路径。

在这里插入图片描述

2.首次运行 Flutter 命令,需要下载一些资源。但是国内的网络你懂的,会有一些限制,导致资源下载失败。

所以,你需要镜像站点,来帮助你的 Flutter 命令行工具能下载到其所需的资源。设置两个环境变量即可:PUB_HOSTED_URL 和 FLUTTER_STORAGE_BASE_URL。

同样的,打开 环境变量 设置界面,在 用户变量 一栏中,新建以下两个环境变量。

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

在这里插入图片描述

安装 Android Studio

1.下载并安装 Android Studio
2.运行 Android Studio,并进入 ‘Android Studio Setup Wizard’,这会安装最新的 Android SDK, Android SDK Platform-Tools 以及 Android SDK Build-Tools,这些都是在开发 Android Flutter 应用时所需要的。

运行 flutter doctor

以上操作完成后,关键的时刻到了。运行 flutter 命令试试看吧。

打开 Windows 的 CMD 窗口,运行以下命令。

flutter doctor

这个命令会检查你的现有环境,并将检测结果以报告形式呈现出来。第一次运行,一般都会遇到一些问题,总结下目前我遇到的。

1. Anroid 的 SDK 路径

如下,如果提示找不到 Android SDK 的路径。可能是因为安装 Android Studio 时,选择了自定义设置,手动设置了 SDK 的存放路径。那么按照提示,需要声明当前 SDK 的存放路径。

这里注意下,这个 SDK 说的是 Android 的 SDK ,而不是 Flutter 的 SDK。

在这里插入图片描述
根据给出的提示,使用以下命令,告诉 flutter 当前 SDK 的存放路径即可。

flutter config --android-sdk D:\software_work\Android\Sdk

在这里插入图片描述
这边根据提示,建议重启一下 Windows 命令行窗口。

2. 许可未同意

如下,提示 Android 许可未接受。

在这里插入图片描述
这个好办,根据提示,运行下以下命令。全部同意即可。

flutter doctor --android-licenses

在这里插入图片描述

问题全部处理完毕后,运行 flutter doctor ,提示 No issues found ,那么恭喜你,Flutter 的世界离你很近了。

在这里插入图片描述

Android Studio 安装插件

接下来,就是配置你的 IDE 了,让 Android Studio 支持 Flutter 项目的创建。

这里比较简单,打开 Plugins 选项,找到 Flutter ,安装好后重启一下即可。

在这里插入图片描述

Android Studio 创建第一个 Flutter 应用

一切工作准备就绪,准备进入正题了。

1.打开 Android Studio,选择 New Flutter Project…

2.选择 Flutter Applicatin 做为项目类型,点击 Next

3.这里需要填写一个 Flutter SDK 的路径。就是本文第二章里解压后的路径。

在这里插入图片描述
4.点击 Finish。就开始初始化项目啦,静待初始化完毕。

在这里插入图片描述
初始化完毕,我们看下项目文件结构,包含了 Android 、IOS、 Web 三端的文件夹。

嘿嘿,下面 Flutter 的世界就任你遨游啦。

TAG

网友评论

共有访客发表了评论
请登录后再发布评论,和谐社会,请文明发言,谢谢合作! 立即登录 注册会员