【flutter】学习之路（一）环境的搭建

一、Flutter的背景

近期flutter比较热门，Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。Flutter的目标是使同一套代码同时运行在Android和iOS系统上，并且拥有媲美原生应用的性能。

在Flutter诞生之前，已经有许多跨平台UI框架的方案，比如基于WebView的Cordova、AppCan等，还有使用HTML+JavaScript渲染成原生控件的React Native、Weex等。

基于WebView的框架优点很明显，它们几乎可以完全继承现代Web开发的所有成果（丰富得多的控件库、满足各种需求的页面框架、完全的动态化、自动化测试工具等等），当然也包括Web开发人员，不需要太多的学习和迁移成本就可以开发一个App。同时WebView框架也有一个致命（在对体验&性能有较高要求的情况下）的缺点，那就是WebView的渲染效率和JavaScript执行性能太差。再加上Android各个系统版本和设备厂商的定制，很难保证所在所有设备上都能提供一致的体验。

为了解决WebView性能差的问题，以React Native为代表的一类框架将最终渲染工作交还给了系统，虽然同样使用类HTML+JS的UI构建逻辑，但是最终会生成对应的自定义原生控件，以充分利用原生控件相对于WebView的较高的绘制效率。与此同时这种策略也将框架本身和App开发者绑在了系统的控件系统上，不仅框架本身需要处理大量平台相关的逻辑，随着系统版本变化和API的变化，开发者可能也需要处理不同平台的差异，甚至有些特性只能在部分平台上实现，这样框架的跨平台特性就会大打折扣。

Flutter则开辟了一种全新的思路，从头到尾重写一套跨平台的UI框架，包括UI控件、渲染逻辑甚至开发语言。渲染引擎依靠跨平台的Skia图形库来实现，依赖系统的只有图形绘制相关的接口，可以在最大程度上保证不同平台、不同设备的体验一致性，逻辑处理使用支持AOT的Dart语言，执行效率也比JavaScript高得多。

Flutter同时支持Windows、Linux和macOS操作系统作为开发环境，并且在Android Studio和VS Code两个IDE上都提供了全功能的支持。Flutter所使用的Dart语言同时支持AOT和JIT运行方式，JIT模式下还有一个备受欢迎的开发利器“热刷新”（Hot Reload），即在Android Studio中编辑Dart代码后，只需要点击保存或者“Hot Reload”按钮，就可以立即更新到正在运行的设备上，不需要重新编译App，甚至不需要重启App，立即就可以看到更新后的样式。

在Flutter中，所有功能都可以通过组合多个Widget来实现，包括对齐方式、按行排列、按列排列、网格排列甚至事件处理等等。Flutter控件主要分为两大类，StatelessWidget和StatefulWidget，StatelessWidget用来展示静态的文本或者图片，如果控件需要根据外部数据或者用户操作来改变的话，就需要使用StatefulWidget。State的概念也是来源于Facebook的流行Web框架 React ，React风格的框架中使用控件树和各自的状态来构建界面，当某个控件的状态发生变化时由框架负责对比前后状态差异并且采取最小代价来更新渲染结果。

二、Flutter的环境配置

上面讲了这么多，我们也就对Flutter有了一定的认识。接下来的一步就是进行环境的配置，来进行Flutter的开发。

在Flutter中文网有详细的教程，按照步骤一步步走下去就可以了。我就按照我的安装步骤一点点简单的说一下吧。

（我是Mac系统，Windows系统的就不需要往下看了）

第一步，官网步骤是使用镜像，但我测试是不需要的，我没有使用镜像也成功了。

第二步，是去下载官方的SDK。它会默认下载到下载文件夹并解压好。

第三步，这一步比较关键，需要进行配置环境。这一步官网上写的不是很详细。我就详细说一下。

　     我使用的是命令行

vim ~/.bash_profile

在里面新增一行

export PATH=/app/flutter/bin:$PATH

PATH后面输入你的SDK的位置。就像下图中红线标的位置。我最开始~/Downloads不行 就只能写全了。

 

 在运行没有错误后就可以运行保存一下环境文件。

source ~/.bash_profile

这个时候应该能运行flutter命令了，我们运行命令行：

flutter -h

就会看到类似这样的图

 

第四步、检查环境

还是继续命令行

flutter doctor

此图是网上的，我的环境已经弄好了，后面会贴出。这是没有配置好的。

 

在这里我们看到iOS环境没有装好，英文比较好的话不用我说了直接就能看懂，不好的就听我说吧。里面已经写得很详细了。×后面都写了怎么做。直接命令行copy运行就行了。这个会跟网速有关。

我使用的开发工具是VS Code。配置方法很简单，安装Flutter插件就行。

最后继续运行环境监测就会成下面的样子。

由于我没有进行过安卓开发，就没装安卓环境。

到了这一步，环境的配置就基本完成了。接下来就可以进行开发了。 

参考文档：

Flutter官网

Flutter中文网

国内少有的Flutter干货分享：Flutter的原理及美团的实践！

Flutter教程

补充：

在最新的系统上按照之前的方法安装会出现下面的问题。

 这个问题它上面也是说了解决方案是到6207这个issue上，但是我还是没有解决。最后我在Stack Overflow上找到了解决方案。地址

在隔一段时间之后使用flutter时，有时候会出现zsh: command not found: flutter的问题，

解决方案如下

在命令行输入 sudo vi ~/.bash_profile，然后在里面按i添加
export PATH=/Users/your path/flutter/bin:$PATH
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

需要注意的是把/Users/your path/flutter这个路径，更换为自己的flutter的路径。
编辑完之后，按ESC键，输入:wq，就可以保存退出了
2. 执行source ~/.bash_profile，这一步很重要，否则上面配置文件虽然有了，但是没有生效。 一般来说上面的路径是不会变的，所以我们也可以直接使用这一步
3. 配置文件生效后，就可以使用flutter doctor继续探索flutter了

补充 ------ 2020.05 ------- 

1、由于新版Mac系统终端默认zsh。终端启动时 ~/.bash_profile 将不会被加载。所以我们会遇到   zsh: command not found: flutter这种情况。

解决办法就是修改 ~/.zshrc ，就是在终端中输入 sudo vi ~/.zshrc  然后进入编辑模式 在其中添加：source ~/.bash_profile

2、Android Studio和VSCode中无法创建Flutter项目的解决办法，我遇到过在Android Studio和VSCode中创建Flutter新工程时会卡住，好久也没有进度。

我的解决方法是：先在terminal中用"flutter create project_name"创建了新项目，再用Android Studio或VSCode打开，即可正常使用。

3、有时候也会遇到这样的报错 Waiting for another flutter command to release the startup lock...

解决方法：（1）删除lockfile文件   终端输入 rm ./flutter/bin/cache/lockfile  或者找到flutter安装目录下的bin下的cache文件夹中的lockfile文件，删掉它。

　　　　　（2）在终端输入 killall -9 dart 

两种解决方法都行。

补充 ------ 2020.05 -------

最近从Android Studio3.5升级到了4.1发现了很多问题。

问题1:

会遇到studio停在启动页打不开的情况。

原因：

1.由于在启动时更新plugins时间慢。而且在你强制退出后会有更大问题。

2.新版本一些配置文件的地址变了，再加上老的插件会导致冲突打不开

解决方法：

最简单粗爆：完全卸载旧版本。然后安装最新版4.1.2

也可以网上一步步查是那个插件冲突，然后解决。这种方式比较麻烦。

Mac下完全卸载Studio
第一步： 卸载Android Studio应用及相关配置
rm -Rf /Applications/Android Studio.app
rm -Rf ~/Library/Preferences/AndroidStudio*
rm ~/Library/Preferences/com.google.android.studio.plist
rm -Rf ~/Library/Application Support/AndroidStudio*
rm -Rf ~/Library/Logs/AndroidStudio*
rm -Rf ~/Library/Caches/AndroidStudio*

第二步：删除所有Projects
rm -Rf ~/AndroidStudioProjects

第三步：删除gradle相关文件
rm -Rf ~/.gradle

第四步：卸载所有Android Virtual Devices(AVDs) and *.keystore. note:
rm -Rf ~/.android

第五步：删除Android SDK tools，对应自己的sdk目录即可
rm -Rf ~/Library/Android*

问题2:

在你允许flutter doctor的时候还会遇到这个问题

原因是：Android studio 4.1中plugin目录发生了变化，可以用下面的指令软链接一下目录

解决方法：

ln -s ~/Library/Application Support/Google/AndroidStudio4.1/plugins ~/Library/Application Support/AndroidStudio4.1

问题3:

没有Start a new Flutter project这个项目

解决方法：File | Settings | Plugins 中开启 Android APK support 插件

 问题4:

kotlin插件不能关闭，我关闭后直接打不开了，重新安装也没用。

原因上面已经写出了。

解决方法：我在网上找了很多的解决方法，但是都没有用。

Solution:

On Mac OS, delete this

/Users/[your_name]/Library/Preferences/AndroidStudio4.0/disabled_plugin.txt

1.Open /Users//Library/Preferences/AndroidStudio4.0/codestyles
2.delete disabled_plugins.txt
3.restart Android Studio

网上的方法多是这种，这种适合于从3.x升级上来的。但是如果是直接从4.x安装的不会有这个文件夹。

解决方法：
~/Library/Application Support/Google/AndroidStudio
在这里面找到disabled_plugins.txt 进行修改