> For the complete documentation index, see [llms.txt](https://devbook.site/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://devbook.site/1-ru-men/flutter-kai-fa-huan-jing-da-jian.md).

# 第1节：Flutter开发环境搭建

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

本节学习用时：**30分钟**

本节学习方式：动手实践

本节目录：

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

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

附

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

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

### 1、环境已完善时

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

> ![flutter doctor 检测出无问题](https://3320264277-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVSU1YOqp0suas4rOgR%2F-LVmK6J0OWPnjWfRJhIf%2F-LVmK7x6AMMVMhxj-baY%2Fflutter%20doctor%20%E6%A3%80%E6%B5%8B%E5%87%BA%E6%97%A0%E9%97%AE%E9%A2%98.png?generation=1547032637145912\&alt=media)

### 2、环境未完善时

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

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

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

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

> ![flutter create originflutterproject](https://3320264277-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVSU1YOqp0suas4rOgR%2F-LVmK6J0OWPnjWfRJhIf%2F-LVmK7x8CfXEcmqGodFg%2Fflutter%20create%20originflutterproject.png?generation=1547032639368745\&alt=media)

### 2、运行Flutter项目

在指定设备上运行Flutter项目

> ![flutter run -d deviceid](https://3320264277-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVSU1YOqp0suas4rOgR%2F-LVmK6J0OWPnjWfRJhIf%2F-LVmK7xA1z_vTNMQE9Uj%2Fflutter%20run%20-d%20deviceid.png?generation=1547032639371510\&alt=media)

如要了解更多请查看：[官网Flutter起步: 体验](https://flutterchina.club/get-started/test-drive/#terminal)

## 附

### 【附1】、flutter doctor问题解决

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

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

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

#### 1.1、`-bash: flutter: command not found`

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

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

> ![ flutter -h 检测flutter](https://3320264277-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVSU1YOqp0suas4rOgR%2F-LVmK6J0OWPnjWfRJhIf%2F-LVmK7xCOK-Ao5KLddt5%2F%20flutter%20-h%20%E6%A3%80%E6%B5%8Bflutter.png?generation=1547032640282983\&alt=media)

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

步骤：

* ①下载Flutter SDK。

  [Flutter SDK官网地址](https://flutter.io/docs/get-started/install/macos)。（如果您觉得速度慢，这里提供一个已经下载好的地址：[Flutter SDK 1.0.0 网盘下载地址](https://pan.baidu.com/s/1yB5WRTvIRA2eISpUHtGP3w) 密码:nm09）
* ②配置Flutter环境变量方法：即在*\~/.bash\_profile*文件里添加需要配置的内容即可。

  下面是我的\~/.bash\_profile文件内容：

> ![我的\~/.bash\_profile](https://3320264277-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVSU1YOqp0suas4rOgR%2F-LVmK6J0OWPnjWfRJhIf%2F-LVmK7xE6Ogu_4Ay5OUl%2F%E6%88%91%E7%9A%84~%3A.bash_profile.png?generation=1547032638097245\&alt=media)

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

```bash
# 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 检测出问题](https://3320264277-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVSU1YOqp0suas4rOgR%2F-LVmK6J0OWPnjWfRJhIf%2F-LVmK7xG3X0vZQw30C2X%2Fflutter%20doctor%20%E6%A3%80%E6%B5%8B%E5%87%BA%E9%97%AE%E9%A2%98.png?generation=1547032638457744\&alt=media)

原因：缺少依赖项

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

①、根据提示终端执行命令，解决`iOS toolchain - develop for iOS devices （Xcode 10.1）`后

> ![iOS toolchain问题解决后](https://3320264277-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVSU1YOqp0suas4rOgR%2F-LVmK6J0OWPnjWfRJhIf%2F-LVmK7xIrtslVba6HpHt%2FiOS%20toolchain%E9%97%AE%E9%A2%98%E8%A7%A3%E5%86%B3%E5%90%8E.png?generation=1547032640160309\&alt=media)

②、根据提示[下载Android SDK](http://www.androiddevtools.cn/)，并放置ANDROD\_HOME指定的目录下后，

> ![Android SDK安装后](https://3320264277-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVSU1YOqp0suas4rOgR%2F-LVmK6J0OWPnjWfRJhIf%2F-LVmK7xKLsiwX-AmvHHG%2FAndroid%20SDK%E5%AE%89%E8%A3%85%E5%90%8E.png?generation=1547032639498415\&alt=media)

③、为Android Studio安装Flutter Plugins后

> ![Android Studio安装Flutter Plugins后](https://3320264277-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVSU1YOqp0suas4rOgR%2F-LVmK6J0OWPnjWfRJhIf%2F-LVmK7xMscepa2z52ggY%2FAndroid%20Studio%E5%AE%89%E8%A3%85Flutter%20Plugins%E5%90%8E.png?generation=1547032638776240\&alt=media)

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

> ![Android Plugins搜索不到的示例截图](https://3320264277-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVSU1YOqp0suas4rOgR%2F-LVmK6J0OWPnjWfRJhIf%2F-LVmK7xOgZ4k7Rx0DgyU%2FAndroid%20Plugins%E6%90%9C%E7%B4%A2%E4%B8%8D%E5%88%B0%E7%9A%84%E7%A4%BA%E4%BE%8B%E6%88%AA%E5%9B%BE.png?generation=1547032640981274\&alt=media)

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

> ![Android Plugins搜索不到的处理1](https://3320264277-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVSU1YOqp0suas4rOgR%2F-LVmK6J0OWPnjWfRJhIf%2F-LVmK7xQGHEQCtZiVj-_%2FAndroid%20Plugins%E6%90%9C%E7%B4%A2%E4%B8%8D%E5%88%B0%E7%9A%84%E5%A4%84%E7%90%861.png?generation=1547032641026729\&alt=media)

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

> ![插件安装方式选择为Install plugin from disk](https://3320264277-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVSU1YOqp0suas4rOgR%2F-LVmK6J0OWPnjWfRJhIf%2F-LVmK7xSJe3o0va68_BT%2F%E6%8F%92%E4%BB%B6%E5%AE%89%E8%A3%85%E6%96%B9%E5%BC%8F%E9%80%89%E6%8B%A9%E4%B8%BAInstall%20plugin%20from%20disk.png?generation=1547032640289865\&alt=media)

附：这是[已经下载好后存在网盘上的Flutter插件](https://pan.baidu.com/s/1yyUxP2lRb7hamJN-MHA1zw)

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

其他资料：官网中的[入门: 在macOS上搭建Flutter开发环境](https://flutterchina.club/setup-macos/#使用镜像)

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

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

![flutter doctor其他问题1](https://3320264277-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVSU1YOqp0suas4rOgR%2F-LVmK6J0OWPnjWfRJhIf%2F-LVmK7xUTlhBWoD7evp2%2Fflutter%20doctor%E5%85%B6%E4%BB%96%E9%97%AE%E9%A2%981.png?generation=1547032637306168\&alt=media)

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

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