Flutter初探与环境搭建

最近组里有个前端的同事在疯狂学习Flutter，本来上半年就一直想学它，但是。。由于个人的原因还有其它的东东想学就一直把它给无限搁置了，为了跟上时代的潮流所以接一来还是下定决定好好将它学一下，毕境如今它的呼声也是越来越高，万一公司哪天有个项目就想要此技术那时完全不会不就非常之被动了，所以，我要学通它！！！

Flutter初探：

首先得对它有一个大体的认识：

现在市面上跨平台解决方案有：

其中第一个Web这种在目前公司正在用着，接下来看一下三者的特点：

其中知名公司在Flutter的官网上有说明，上官网瞅一下：

对于RN，在跨平台技术上也是相当之火的，那相比Flutter方案，它们俩的运行原理有啥不一样么，下面做个对比：

很明显Flutter的性能是要优于RN的，接下来咱们来了解一下Flutter整个的框架结构，就类似于当时学Android一样有一个整体框架图，如下：

Framework(Dart):

• Material：这个是Android Material Design风格的组件，不多说。
• Cupertino：即IOS风格组件。主要有CupertinoTabBar、CupertinoPageScaffold、CupertinoTabScaffold、CupertinoTabView等。目前组件库还没有Material Design风格组件丰富。
• Widgets：提供了Material和Cupertino的基础组件。
• Rendering：渲染Dart UI的抽象层，主要负责和引擎的交流沟通。
• Animation：动画组件库，内置了很多动画。
• Painting：自定义的View都会用到它里面的类和函数。
• Gestures：用作手势的处理。
• Foundation：提供整个Framework的一些功能函数。

Engine(C++):

• Skia：2D的绘制引擎。
• Dart：Dart语言的解析器，
• Text：指纹理，主要是用来处理视频和图片需要高计算量的。

其中这块的开源代码地址在：https://github.com/flutter/engine

环境搭建：

开发系统与工具选择：

开发系统其实吧windows和mac都行，你要说建议当然用mac喽，天然的就支持android和ios，但是！！我组里有个同事用的windows本，装了个黑苹果学flutter也妥妥的，装完之后的性能对于用MAC本的我有时还会被嘲讽一下，他运行速度杠杠的，所以，这个自行来决定，不多做评论。

开发工具可以有两款，先上个对比图，就知道应该选用哪款更合适了：

对于一个搞Android为职业的我来说，当然毫无压力的用后者喽。

Flutter开发环境与iOS开发环境设置（Mac）：

关于Flutter开发环境的搭建可以参考这位大神的博客https://www.devio.org/2019/04/03/development-environment-mac/，依据这个文章自己来从0来搭建一下：

系统要求：

反正我的mac完全能满足学习的要求。

设置Flutter镜像(非必须)：

由于在国内访问Flutter可能会受到限制【ChineseWall】，Flutter官方为中国开发者搭建了临时镜像，大家可以将如下环境变量加入到用户环境变量中：

//Macintosh HD⁩ ▸ ⁨Users⁩ ▸ ⁨你的用户名 ▸ ⁨.bash_profile
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

所以咱们来设置一下：

【注意】：此镜像为临时镜像，并不能保证一直可用，大家可以从 Using Flutter in China 上获得有关镜像服务器的最新动态，打开一下：

然后学习的话上这个网站也比较好。

获取Flutter SDK：

1.点Flutter官网下载其最新可用的安装包。

这里选择稍低一点的版本，如下：

2.解压安装包到你想安装的目录，如下：

3.添加flutter相关工具到path中，还是到我们的bash_profile文件中：

保存并重启下配置，此时直接再敲flutter命令，则会出相应的命令提示，如下：

【注意】：我第一次运行flutter命令时回车之后没任何反应，其实是因为第一次运行一个flutter命令（如flutter doctor）时，它会下载它自己的依赖项并自行编译。以后再运行就会快得多。当出现我一样的问题时需要耐心等待一下。

运行flutter doctor：

看到这个“doctor”的英文单词应该就能知道这个命令是用来检测flutter环境看你本地有哪些问题的，所以咱们来试一下：

其中，居然提示我本机木有安装Android Studio：

这是因为我是通过绿色版来安装Android Studio的，而木有的程序中添加：

这个就不管了，因为我确定我机子上是有Android Studio，待之后遇到问题再说。。其中预期要保证这些东东是要能通过doctor才行：

其中xcode貌似有点问题，因为之后的开发肯定要在android和ios上运行，所以咱们得配置一下它，先看一下目前报的错：

将这块的东东删除掉既可：

然后再运行：

接下来按照这个提示来安装一下：

首先执行“brew update”，在我的mac上开始执行时完全卡住不动，等再久也木有用，最后是在网上参考这位博主https://www.cnblogs.com/zzhaolei/p/11068033.html的办法解决更新卡的问题，更新过程就比较久了，需要有耐心：

然后就可以看到各种软件的信息了。

最后执行时，报了个这个错：

按其提示咱们将这个目录给删除掉：

至此咱们已经更新到最新的了，接下来执行下一个命令：

呃，提示我本机xcode太老了。。那好吧，先更新一下我本机的XCode：

然后在我电脑上在appstore上死活下不下来，所以最终是在网上直接找的离线安装包来装的，巨大，所以也是下了N久才下下来：

然后安装上：

好，咱们再来执行一下“brew install --HEAD usbmuxd” ：

bogon:DerivedData xiongwei$ brew install --HEAD usbmuxd
Updating Homebrew...
==> Installing dependencies for libusbmuxd: autoconf, automake, libtool, libplist and libusb
==> Installing libusbmuxd dependency: autoconf
==> Downloading https://mirrors.ustc.edu.cn/homebrew-bottles/bottles/autoconf-2.69.catalina.bottle.4.tar.gz
######################################################################## 100.0%
==> Pouring autoconf-2.69.catalina.bottle.4.tar.gz