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
🍺  /usr/local/Cellar/autoconf/2.69: 67 files, 3.0MB
==> Installing libusbmuxd dependency: automake
==> Downloading https://mirrors.ustc.edu.cn/homebrew-bottles/bottles/automake-1.16.1_1.catalina.bottle.tar.
######################################################################## 100.0%
==> Pouring automake-1.16.1_1.catalina.bottle.tar.gz
🍺  /usr/local/Cellar/automake/1.16.1_1: 131 files, 3.4MB
==> Installing libusbmuxd dependency: libtool
==> Downloading https://mirrors.ustc.edu.cn/homebrew-bottles/bottles/libtool-2.4.6_1.catalina.bottle.tar.gz
######################################################################## 100.0%
==> Pouring libtool-2.4.6_1.catalina.bottle.tar.gz
==> Caveats
In order to prevent conflicts with Apple's own libtool we have prepended a "g"
so, you have instead: glibtool and glibtoolize.
==> Summary
🍺  /usr/local/Cellar/libtool/2.4.6_1: 71 files, 3.7MB
==> Installing libusbmuxd dependency: libplist
==> Downloading https://mirrors.ustc.edu.cn/homebrew-bottles/bottles/libplist-2.1.0.catalina.bottle.tar.gz
######################################################################## 100.0%
==> Pouring libplist-2.1.0.catalina.bottle.tar.gz
🍺  /usr/local/Cellar/libplist/2.1.0: 29 files, 369.6KB
==> Installing libusbmuxd dependency: libusb
==> Downloading https://mirrors.ustc.edu.cn/homebrew-bottles/bottles/libusb-1.0.23.catalina.bottle.tar.gz
######################################################################## 100.0%
==> Pouring libusb-1.0.23.catalina.bottle.tar.gz
🍺  /usr/local/Cellar/libusb/1.0.23: 29 files, 531.7KB
==> Installing libusbmuxd --HEAD
==> Cloning https://github.com/libimobiledevice/libusbmuxd.git
Cloning into '/Users/xiongwei/Library/Caches/Homebrew/libusbmuxd--git'...
==> Checking out branch master
Already on 'master'
Your branch is up to date with 'origin/master'.
==> ./autogen.sh
Last 15 lines from /Users/xiongwei/Library/Logs/Homebrew/libusbmuxd/01.autogen.sh:
checking whether to build static libraries... yes
checking how to run the C++ preprocessor... clang++ -E
checking for ld used by clang++... /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin/ld
checking if the linker (/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin/ld) is GNU ld... no
checking whether the clang++ linker (/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin/ld) supports shared libraries... yes
checking for clang++ option to produce PIC... -fno-common -DPIC
checking if clang++ PIC flag -fno-common -DPIC works... yes
checking if clang++ static flag -static works... no
checking if clang++ supports -c -o file.o... yes
checking if clang++ supports -c -o file.o... (cached) yes
checking whether the clang++ linker (/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin/ld) supports shared libraries... yes
checking dynamic linker characteristics... darwin19.0.0 dyld
checking how to hardcode library paths into programs... immediate
./configure: line 16735: syntax error near unexpected token `libplist,'
./configure: line 16735: `PKG_CHECK_MODULES(libplist, libplist >= $LIBPLIST_VERSION)'

READ THIS: https://docs.brew.sh/Troubleshooting

bogon:DerivedData xiongwei$ 

嗯，可以了，接下来再执行下一条命令：

呃，继续报错。。唉，对于flutter的起步就折腾了这么久，真是有点大伤势气。。所以为了尽快上手flutter的学习，这里换一个思路，不再纠结ios的环境的配置了，毕境我的xcode环境是好使的，ios模拟器也妥妥的，然后学习的话其实有Android环境既可，我主业就是Android那环境直接可以忽略，所以接下来ios环境中能装的先装了，装了报错的先放着，反正也不影响flutter的入门学习，所以对于这个错直接忽略，入门的话不要在搭建环境上就放弃学习了，为了增加学习的自信快速能跑起来才是王道，所以继续往下执行：

接下来又是一个等待过程，最终也还是报错了。。

继续先忽略，再下一个命令：

嗯，不容易，这个命令成功了，木有报错，好继续：

成功，继续往下：

最后一条命令了：

 

好，关于ios toolchain缺失的命令都已经执行完了，咱们再来执行一下flutter doctor看一下目前的状态：

android这块也给了个提示，那无脑的执行一下：

先忽略吧，而ios toolchain中的提示也先忽略，咱们先来尝试运行第一个flutter项目，如果出问题了再说。

iOS开发环境设置：

安装Xcode：

要用Flutter开发iOS App需要Xcode 9.0 或更高版本:

1、安装Xcode 9.0或更新版本(通过链接下载或苹果应用商店)，我本机安装目前是最新的xcode 11.2.1。

2、配置Xcode命令行工具以使用新安装的Xcode版本：

$ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

以上路径时对于最新版Xcode的路径。如果你需要使用不同的Xcode版本，需要指定相应路径。

咱们来执行一下：

3.确保Xcode许可协议是通过打开一次Xcode或通过命令sudo xcodebuild -license同意过了。

接下来就可以使用Xcode，在iOS设备或模拟器上运行Flutter App了。

设置ios模拟器：

然后咱们来设置一下：

如果想要切到其它型号，可以在菜单中进行切换，比如咱们想要iphone x：

创建和运行一个简单的flutter项目：

经过了漫长曲折的环境配置之后，终于可以开始弄一个hellowrorld的项目瞅一眼它的真面目了，真心不易，下面开始。

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

$ flutter create my_app

咱们来按着命令创建一下：

经过一小段等待，则创建成功提示：

接下来大致瞅一下整个工程的目录结构：

2.命令运行完成之后会在当前目录下创建一个名为my_app的Flutter项目，然后通过一下命令可以运行它：

$ cd my_app
$ flutter run

下面来试一下，能否成功的将flutter的第一个hello world级别的项目给运行到咱们的ios模拟器上：

嗯，确实是成功运行了，大致操作一下这个工程，比较简单，就是做一下累加：

除了通过"flutter run"命令来运行之后，当然也可以将这工程导到xcode当中来到IDE中进行运行啦，咱们在我们的flutter项目中执行“open ios/Runner.xcworkspace”来用xcode打开：

 

然后咱们来运行一下：

Android开发环境与Flutter插件安装（Mac）：

Android Studio安装：

对于我本身就是搞安卓的来说，这一步我就不多说了，安装方法网上一大堆，我本地环境肯定妥妥的。

安装Flutter插件：

• 打开Android Studio
• 打开Preferences > Plugins (macOS), File > Settings > Plugins (Windows & Linux)
• 选择 Browse repositories, 搜索 Flutter plugin：
  
• 然后点击安装，然后安装Dart插件
  

  会弹出这个确认框，直接点接受既可，然后又弹出个提示：
  

   也就是需要依赖于Dart插件，点yes一并给安装了：
  

• 完成之后选择重启Android Studio，这样它就具有开发Flutter的能力了。

好，配置好了Android环境之后，咱们用它来打开咱们的flutter工程：

 

其运行就点这个就成了：

ios的运行这里就不演示了，重点来看怎么运行在android上，这里以我的readmi note7真机为例：

运行，我本机报错了。。

根据错误提示，咱们需要将Android-tools给升级一下，具体如下：

 

咱们勾选一下它：

点击ok则开始下载了：

升级完之后，咱们再来运行一下：

嗯，成功了，看一下在我手机上运行的效果是否跟在ios看到的是一样的：

嗯，是一样的，以上的折腾就为咱们未来跨平台flutter技术的进一步学习奠定了良好的基石，接下来努力学习，天天向上~~