Flutter 基础之环境集成与搭建-MAC篇

最近有了些许时间，是时候来看看最近大火的Flutter框架了，老实说我最近也接触了一段时间了发现无论从Dart语言再到Flutter框架，我感觉Google在设计这两个的时候大量借鉴了JavaScript与ReactNative的设计思路，上一篇我写的《聊一聊Flutter中的future,await,事件队列,微任务》 文章里面也对这方面了做了些对比，如果再有时间我会再更新几篇这些对比的文章，把他们之间的相同与不同的东西写一写，好了话说回来，咋们今天的内容是基础也就是环境搭建，好的让我们轻松愉快的开始吧：

提前给大家一个好的消息，目前高版本的Flutter的环境搭建比ReactNative框架的搭建要简单了些，这个是一个好的事情，框架搭建都很复杂的话可以劝退不少想接触的工程师呢

1. 我们首先要做的事获取Flutter的SDK

点击Flutter官网 去进行下载即可，我目前下载的是flutter_macos_2.2.3-stable.zip，面安装解压即可

2. 添加flutter SDK到path中，也就是添加环境变量

$ cd ~
$ vim .bash_profile

然后添加：

export PATH=/Users/91001191/flutter/flutter/bin:/$PATH

之后记得保存文件。

可以运行 echo $PATH 去查看环境变量是否成功添加

3. 上面path配置完成之后，需要检查目前安装的情况，运行：

$ flutter doctor

该命令检查你的环境并在终端窗口中显示报告，如下图：

image.png

如图全部是绿色的勾勾说明你的环境搭建OK了。

给大家插一句，肯定有小伙要问刚刚只是下载了Flutter的SDK，那Dart的SDK呢怎么没见你搭建啊，因为从 Flutter 1.21 版本开始，Flutter SDK 会同时包含完整的 Dart SDK 因此如果你已经安装了 Flutter，可能就无需再专门下载 Dart SDK 了。那么Dart SDK在Flutter SDK的哪个文件目录里呢？打开Flutter SDK跟文件夹在子文件夹/bin/cache/下就能看到Dart SDK的文件夹，MAC上面的完整路径：flutter/bin/cache/dart-sdk，这个我们在Android Studio开发的时候需要配置用到哦，如下图：

image.png

你不配置的话你的Flutter项目源码会无法索引，所以还是要配置的

好了，我们环境搭建好了现在创建一个HelloWorld项目运行试试效果：

通过如下命令创建一个Flutter项目：

$ flutter create my_app

成功创建的项目结构是这个样子的：

image.png

里面有Flutter的dart源文件，以及包含了Android，IOS的宿主目录，是的你没有看错这个项目架构简直与ReactNative是一模一样的，也就是说Flutter是依赖原生宿主的，所以必须要有原生的项目结构

好了，现在我们通过以下命令可以运行它：

$ cd my_app
$ flutter run

在这个运行命令前需要你启动一个模拟器或者真机，如果你什么都没有那么他会打开一个Chrome 网页去运行，我一开始就遇到了半天没反应过来，不过说明高版本的Flutter是支持Web了的😁

flutter devices 可以用这个命令去查看当前的设备如下：

image.png

上面显示了我的真机，我的虚拟机，还有一个就是上面提到的Chrome设备

你可以使用该命令去指定一个具体的设备运行：

flutter run -d B6FF08D6-33DD-424B-8D90-DCE098339589

另外我测试了高版本的Flutter不需要做什么额外的配置就可以在真机去调试运行，这一点对比ReactNative要好不少，除了刚才说的命令运行以外，还有一种运行方式就是打开他们的宿主工程也就是里面的IOS，Android文件夹用Xcode或者AndroidStudio去打开编译运行也是可以的，这一点与ReactNative也是一模一样的

好了，咋们的环境搭建基础篇就到这里了，非常的简单容易上手，推荐小伙伴多动手去试试吧···