发表于 2018-12-19 · 更新于 2022-03-24

Flutter►第一章：Flutter入门

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

本节学习内容：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、环境已完善时

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

flutter doctor 检测出无问题

2、环境未完善时

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

分割图1

二、创建第一个Flutter项目

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

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

三、运行Flutter项目

1、运行方法

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

1	flutter devices

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

在指定设备上运行Flutter项目

1	flutter run -d xxxxxxxx

1.3、在WebStorm中运行

本质还在flutter run -d xxxxxxxx

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

webstorm flutter run -d deviceid

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

webstorm flutter run -d deviceid

运行效果如下：

webstorm flutter run -d deviceid

热更新问题：

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

1.4、在VS Code中运行

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

2、运行项目的常见问题

2.1 问题一、缺少第三方库

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

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

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

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

分割图1

附

【附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：