mac系统Flutter开发环境搭建以及创建第一个Flutter项目

寒假在家，时间挺多的，然后这两天我即将入职的公司的team leader找我聊了几句，大概就是帮我规划了下我所从事的岗位需要掌握的技术栈，并且建议我提前学习，好入职的时候能够快速上手业务，在这里感谢一下leader的指导吧。由于leader秋招那会也建议我多学习下flutter，这次又进一步建议我学习下flutter的skia渲染原理，说实话，我到现在还没开始学flutter呢。好吧，既然flutter那么重要，寒假的学习flag又多一个flutter！
Flutter是Google推出的一种跨平台解决方案，从18年退出时候，势头很大， 在gitHub上半年的star已经直逼RN5六年的star，并且各个前端大佬都直言看好flutter的发展，并表示Flutter大有统一前端开发，移动端开发的趋势，国内目前，阿里的咸鱼就是基于Flutter开发的，并且腾讯的NOW LIVE也是基于FLutter开发的，字节的今日头条，美团的美团app，在技术实现上都采用了Flutter，看来这个Flutter确实挺牛，并且已经获得国内大厂的广泛簇拥。
看了网上的资料，flutter的开发环境配置就挺折腾人的，我也是配置了半天才配置完成，回想整个过程，踩过的坑还挺多的，必须要记录一下了。

第一步：下载flutter sdk

flutter sdk的下载有网友推荐直接官网下载就可以了，我开始也是直接官网下载，但是那网速，真的是，90M的压缩包要下载5个小时，还时不时下载错误。于是我直接在清华大学镜像站下载了flutter sdk的压缩包，这里我附上清华大学镜像站的连接。
清华大学镜像站flutter下载连接
flutter sdk下载完成后，就是找一个安装目录解压压缩包，建议在mac的终端下完成操作。
比如，我把flutter sdk安装在了/Users/cjl/Documents/flutter_mac/目录中，那么我先进入该目录下

cd /Users/cjl/Documents/flutter_mac/

然后输入ls，查看文件夹下有什么东西，确认进入了正确的文件夹

ls

然后把flutter sdk解压到当前文件夹下

unzip /Users/cjl/Downloads/flutter_macos_1.20.2-stable.zip

此时，flutter sdk就安装好了

第二步，配置环境变量

在终端下输入vim ~/.bash_profile，打开bash_profile文件，如果没有，vim会为我们创建该文件。

vim ~/.bash_profile

再该文件里输入如下三行命令，输入i，进入编辑模式，然后输入一下三行命令，然后按esc退出编辑模式，然后输入:wq，保存退出。

export PATH=/Users/cjl/Documents/flutter_mac/flutter/bin:$PATH
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

下面解释一下这三行命令的作用：
第一行命令是配置flutter的全局路径，这样可以让在任何文件路径下使用flutter命令。
第二行命令配置pub镜像地址；这里不知道pub是什么的暂时不用管，这里一起配置上，后面会提到。
第三行命令配置flutter镜像地址；
PS：这些镜像的配置主要是因为后续flutter需要从网络上下载一些插件，如果不配置镜像，很有可能下载失败。
另外就是要提的是，这些镜像地址并不是一直稳定的，需要长期稳定的镜像地址可以自行在Flutter社区上查看，及时更换最新的地址。
还有就是：上面第一行中的目录/Users/cjl/Documents/flutter_mac/flutter/是我安装flutter sdk的目录，这里需要替换成你自己的flutter sdk存放路径。例如：/Users/fengshun/workFeng/Flutter。
配置完成后，终端输入source ~/.bash_profile使之生效，之后在哪里使用flutter命令都会有用。

source ~/.bash_profile

这里还有一个BUG需要说明，当我配置完flutter的开发环境之后，退出终端，下一次进入终端再使用flutter命令后，终端报错，显示zsh: command not found: flutter。显示找不到flutter命令，似乎之前的配置都失效了！！
其实并不是这样的，经过查找资料，发觉是从 macOS Catalina 版开始，您的 Mac 将使用 zsh 作为默认登录 Shell 和交互式 Shell。您还可以在较低版本的 macOS 中将 zsh 设置为默认 Shell。
解决办法参考我的上一篇博客：https://blog.csdn.net/Super_CJL/article/details/113528681
接下来，我们在终端输入flutter -h，第一次输入终端会为我们从网上下载一些flutter相关的文件，包括自动安装dart sdk,此处略慢。

 flutter -h

至此，我们在终端输入flutter --version，如果显示flutter的版本信息，则表明flutter安装成功

flutter --version

输入dart --version，表示dart sdk也安装成功

dart --version

显示信息如下

第三步：安装IOS模拟器

这里你只要安装了XCode就会自动安装ios模拟器，你可以打开Xcode，按如图步骤打开ios模拟器。

第四步：android模拟器安装

andriod模拟器安装略复杂。
第一步，安装android stdio，官网直接下载即可。
第二步，打开android stdio，安装 android sdk,这一步很扯，我当时一直安装不上，但是也没做特别的操作，过一会就安装成功了，主要是网速慢，你可以通过更改http 代理，这样应该就下载很快了。也可以自行百度解决方案，没啥难度。
第三步，配置一个安卓模拟器，如下图，启动android stdio，右下角，点击Configure，选择AVD Manager,配置模拟器。

第五步：选择VSCode 或者android stdio进行flutter开发

官方推荐使用VSCode 或者android stdio进行flutter开发，各有优劣，这里就不详述了。我两个软件都安装了，要进行flutter开发，还需要分别在VSCode和android stdio上安装flutter 和 dart插件。都非常简单。
VSCode 安装过程如下：打开VSCode，点击view->Command Paletter，Extensions:install extensions,搜索flutter和dart就可以安装。


我已经安装好了

在android stdio安装这两个插件也是类似的。打开android stdio，右下角，Configure，选择Plugins，然后搜索这两款插件，进行安装即可。
这里又有一个小bug，我明明在android stdio上安装了这两个插件，但是在终端输入flutter doctor检查是，总是显示我在android stdio上没有安装这两个插件，百度了解决办法，发觉我似乎通过执行
flutter channel dev
flutter update
之后，这个问题就解决了。
也就是说，把flutter更新到最新版本，就不会有这个bug了。
这时候，我执行flutter doctor检测开发环境安装情况，显示已经配置完成。

PS：如果不记得flutter的命令了，终端输入flutter -h，就可以查看flutter的命令集合以及每个命令的解释。

创建第一个flutter项目

开发环境配置好了，接下来我们来尝试创建我们的第一个flutter项目
我们选择在终端下创建，你也可以在android stdio或者VSCode里创建。
首先，需要进入你想把文件创建的地方的目录：

cd /Users/cjl/Documents/flutter_mac/FlutterDemoApp

然后创建项目

flutter create helloflutter

PS：项目名只能用小写，不然会创建失败，我已采坑

cjl@cjldeMacBook-Pro FlutterDemoApp % flutter create HelloFlutter
"HelloFlutter" is not a valid Dart package name.

See https://dart.dev/tools/pub/pubspec#name for more information.

这时候我们启动android stdio，打开该项目，选择模拟器，就可以运行该项目了，在IOS模拟器运行效果如下：
这个app实现了简易的技术功能。

至此，第一个Flutter项目创建完成！