第1节：Flutter开发环境搭建与运行

[TOC]

本节学习内容：Flutter的环境搭建及创建运行您的第一个Flutter项目。

本节学习用时：30分钟

本节学习方式：动手实践

---

本节目录：

一、检测您是否具备了Flutter的开发环境

二、创建并运行第一个Flutter项目

附

---

一、检测您是否具备了Flutter的开发环境

因为您可能之前已经有配置过Flutter的开发环境了，所以为了避免重复安装，我们通过在终端运行flutter doctor命令，来进行检测，查看是否缺少。

新电脑未安装，请点击查看在macOS上搭建Flutter开发环境

# 在终端打开该文件
open ~/.bash_profile

# 终端编辑该文件(没有则会新建)
vim .bash_profile # 不存在.bash_profile，可以该终端输入来创建该文件

# 在打开的文件中，插入如下内容
export PATH=`pwd`/flutter/bin:$PATH

# 输入 :wq 来保存


# 在终端执行如下命令，保证设置的环境变量，本次就能够使用
source .bash_profile

1、环境已完善时

如果您的环境之前已经配置过且已完全配置好的话，您的命令执行结果可能会如图所示：

2、环境未完善时

• 如果有提示错误的(如果你是第一次，那肯定有很多问题)，请参照本节最后的【附1】、flutter doctor问题解决中的内容进行解决。

二、创建第一个Flutter项目

1、最简单的创建Flutter项目的方法

在终端执行flutter create originflutterproject即可在指定目录建立Flutter项目。

三、运行Flutter项目

1、运行方法

1.1、查找本地及指定运行设备

flutter devices

1.2、常见的在终端运行方法

在指定设备上运行Flutter项目

flutter run -d xxxxxxxx

1.3、在WebStorm中运行

本质还在flutter run -d xxxxxxxx

如果，你想在WebStorm中运行的话，操作如下：

上述 External Tool的添加过程如下：

运行效果如下：

热更新问题：

直接在终端下，输入对应的如r就行。

1.4、在VS Code中运行

选择设备有如下两个地方。当然你也可以直接在终端上执行。

2、运行项目的常见问题

2.1 问题一、缺少第三方库

如果缺少依赖的第三方库，在pubspec.yaml 文件中找到 dependencies 在里面填写 第三方库。

并请在终端执行flutter packages get，以拉取声明的第三方库到本地工程即可。

flutter第三方库官网：https://pub.dartlang.org/

如要了解更多请查看：官网Flutter起步: 体验

附

【附1】、flutter doctor问题解决

flutter doctor该命令的作用：查看是否需要安装其它依赖项来完成安装。

下面涵盖的错误介绍及解决有：

• 1.1、-bash: flutter: command not found
• 1.2、缺少依赖项
• 其他问题，请查看【附2】、flutter 安装过程中的其他问题解决

1.1、flutter doctor执行问题-bash: flutter: command not found

原因：Flutter相关命令无效(此时flutter -h肯定也是一样的问题)

附：完好的flutter -h结果应为如图所示：

解决：下载Flutter SDK，并配置Flutter环境变量到PATH中即可。

步骤：

• ①下载Flutter SDK。

  Flutter SDK官网地址。（如果您觉得速度慢，这里提供一个已经下载好的地址：Flutter SDK 1.0.0 网盘下载地址 密码:nm09）

• ②配置Flutter环境变量方法：即在~/.bash_profile文件里添加需要配置的内容即可。

  下面是我的~/.bash_profile文件内容：

但在这里目前我们只需要上图中我圈出来的那行export PATH=/Applications/flutter/bin:$PATH #配置Flutter环境变量即可。这里我们先满足目前认知Flutter所需的即可，没必要把如下其他行是暂时不需要的所有的都加上去，当然你加上去可以以后更省事。

# Flutter
export PATH=/Applications/flutter/bin:$PATH  #配置Flutter环境变量

# 设置pub源，才能让你在国内愉快的使用别人写的库
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

# ANDROID
export ANDROID_HOME=/Users/lichaoqian/Library/Android/sdk #android sdk目录，替换为你自己的即可
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools

1.2、flutter doctor执行结果问题：缺少依赖项

如果您不缺依赖项，那您命令的执行结果会为

如果flutter doctor 检测出问题，此时的命令执行结果一般如下：

原因：缺少依赖项

解决：遇到什么错误，根据提示操作即可。

1.2.1、iOS toolchain

①、解决iOS toolchain - develop for iOS devices （Xcode 10.1），根据提示终端执行命令后iOS toolchain即变为正常如下

1.2.2、Android toolchain

②、解决Android toolchain - develop for iOS devices

在遇到这个问题，首先要确保自己的Android studio的下图中的几个项勾选上：

安装 Android SDK Command-line Tools(latest)

根据提示下载Android SDK，并放置ANDROD_HOME指定的目录下后，问题解决，结果如下：

其他参考：入门: 在macOS上搭建Flutter开发环境

修改环境变量：

# ANDROID
export ANDROID_HOME=/Users/qian/Library/Android/sdk #android sdk目录，替换为你自己的即可
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools

非M1芯片的Mac：

1.2.3、Android Studio

③、解决Android Studio，

为Android Studio安装Flutter Plugins后

安装过程中，如遇Plugins搜索不到时候，如

请确保如下图中的路径Perferences -> Appearance & Behavior -> System Settings -> Updates -> Use secure connection中的勾是取消的，如果不是请取消掉，并重启Android Studio后，重新搜索即可。

或者可以直接从http://plugins.jetbrains.com/上下载插件后，通过选择插件安装方式为Install plugin from disk来进行安装，如下图：

附：这是已经下载好后存在网盘上的Flutter插件

1.2.4、解决Intelij IDEA，为Intelij IDEA安装Flutter Plugins后

④为Intelij IDEA安装Flutter Plugins后的结果，即为不缺依赖的情况了。

其他资料：官网中的入门: 在macOS上搭建Flutter开发环境

如果还没解决安装问题，请查看【附2】、flutter 安装过程中的其他问题解决

四、升级 Flutter

官网升级 Flutter的标准步骤

1.2.5、解决Flutter

有时候，你还会有这种错误，原因为你的flutter sdk太旧了。

到官网下载最新sdk，并替换掉你之前的flutter sdk。（附：你之前的Flutter的sdk的路径，请通过你写在open ~/.bash_profile中的PATH找到。

【附2】、flutter 安装过程中的其他问题解决

原因：您的Flutter SDK 要求你Android Studio中的Flutter plugin版本至少到16.0.0。但你当前的Android Studio版本却只允许你最高只能装到Flutter plugin version 12.1。

解决：升级你的Android Studio后，重新安装其Flutter plugin。

【附3】、flutter 运行的过程中的其他问题解决

可以看出是路径出错了。

根据路径出错这个方向，进行工程配置错误的查看，发现出错的位置在如下图位置。

假设我们的工程目录结构如下，

则cj_nativeflutter_fluttermodule的路径表示为${SRCROOT}/../cj_nativeflutter_fluttermodule

修改完后，重新编译即可解决问题。

Command PhaseScriptExecution failed with a nonzero exit code

在pubspec.yaml文件所在的目录下执行flutter packages get

flutter packages get获取pubspec.yaml文件中列出的所有依赖包

接着再执行flutter packages upgrade，会发现刚才的Compiler message错误少了很多

flutter packages upgrade 获取pubspec.yaml文件中列出的所有依赖包的最新版本

更新库之后还有错误。

进入工程查看，确实各个地方都提示着我们工程代码有问题。那么我们所需要做的就是修复这个问题。

我们对这些编译不通过的代码进行修复或者临时注释掉，即可通过。