flutter介绍及mac版本环境安装及运行

一、什么是Flutter

Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的

这是Flutter官网的介绍，从其中我们可以发现Flutter的三大优势

1.跨平台，实现一套代码在多平台进行运行，节约开发成本及维护成本
2.原生用户界面，高质量、高效率运行
3.开源免费，真的很重要，可以多样化实现功能，对于公司来说不会出现官司问题

其中官网中有专门讲解Flutter的书籍，大家可以去查看

二、对比其他主流跨平台框架

Cordova：Cordova还是基于网页技术进行包装，利用插件的形式开发移动应用的，就这一点。无论是性能还是体验，Flutter都可以完胜了。

RN（React Native）：RN的效率由于是将View编译成了原生View,所以效率上要比基于Cordova的HTML5高很多,但是它也有效率问题,RN的渲染机制是基于前端框架的考虑,复杂的UI渲染是需要依赖多个view叠加.比如我们渲染一个复杂的ListView,每一个小的控件,都是一个native的view,然后相互组合叠加.想想此时如果我们的list再需要滑动刷新,会有多少个对象需要渲染.所以也就有了前面所说的RN的列表方案不友好。

Flutter：在渲染技术上,选择了自己实现(GDI),由于有更好的可控性,使用了新的语言Dart,避免了RN的那种通过桥接器与Javascript通讯导致效率低下的问题,所以在性能方面比RN更高一筹;有经验的开发者可以打开Android手机开发者选项里面的显示边界布局,发现Flutter的布局是一个整体.说明Flutter的渲染没用使用原生控件进行渲染。

注：目前技术胖有做免费的Flutter教学视频，零基础都可以学习，大家可以去参考他的文章及视频，传送门

三、Flutter开发环境搭建

目前使用的最多的是windows和Mac OS开发，由于我是iOS开发，所以我先安装的是Mac OS的开发环境，之后会去windows端进行环境的配置，然后出相应的环境安装文章（目前网上有很多的windows环境安装的文章，大家可以自行去搜索，其中技术胖有详细讲解windows的安装，还有视频哦）

系统要求

要安装并运行Flutter，您的开发环境必须满足以下最低要求:

• 操作系统: macOS (64-bit)
• 磁盘空间: 700 MB (不包括Xcode或Android Studio的磁盘空间）.
• 工具: Flutter 依赖下面这些命令行工具.
  • bash, mkdir, rm, git, curl, unzip, which，brew

这里我是使用的brew，如果大家没有安装的话可以参考，brew安装教程。后面有错误，需要使用brew命令来处理。

1.获取Flutter代码

克隆Flutter代码到本地，通过终端找到你想存放flutter的文件夹，（我存放的目录文件路径是/Users/qq/Documents/Flutter,其中Flutter是我自己创建的文件夹）

git clone https://github.com/flutter/flutter.git

路径查找方式.png

• 其中flutter文件夹是克隆下代码自带的，这个要分清楚，下面填写路径的时候要注意的

2.使用镜像及配置环境变量

由于在国内访问Flutter有时可能会受到限制，Flutter官方为中国开发者搭建了临时镜像，大家可以将如下环境变量加入到用户环境变量中
使用命令：vim ~/.bash_profile (.bash_profile有兴趣的同学可以参考下这篇文件，详细介绍了.bash_profile)打开.bash_profile文件
使用命令：i 进入编辑模式

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

将上面的代码拷贝到文件中，其中export PATH=/Users/qq/Documents/Flutter/flutter/bin:$PATH是export PATH=本地文件夹路劲/flutter/bin:$PATH

使用命令：esc 退出当前编辑模式

使用命令：:wq 保存刚刚填入的信息并退出

使用命令：source ~/.bash_profile 是配置立即生效，重新打开终端

3.在终端中运行flutter doctor来查看是否还有其他需要依赖

对于我当前的Mac OS运行flutter doctor会出现以下错误信息其中[!]代表你需要解决的错误

错误图1.jpg

对于第一个错误Andriod toolchain 终端已经给出了解决办法，运行命令flutter doctor --andriod-licenses，终端会让你对相关东西授权，我没有仔细看，直接都是Y/N，直接都是Y就可以了

打印信息.png

完成之后我们在使用flutter doctor命令查看新的错误信息

错误图2.png
对于第一张错误中错误2，iOS toolchain大家看到终端下面也提供了解决办法，大家按照下面的命令一个一个执行就可以了
brew update
brew install --HEAD usbmuxd
brew link usbmuxd
brew install --HEAD libimobiledevice
brew install ideviceinstaller
brew install ios-delop

对于第二张终端信息大家也可以看到，也是给出了解决方法的，大家可以按照上面的信息，直接复制命令执行就可以了，我这边给大家抄一遍
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
执行完之后就只剩错误信息Android Studio(Version 3.2)
首先大家需要安装Android Studio软件，对于安卓开发的朋友肯定不陌生，那么对于iOS开发的朋友有可能会有点陌生，在这个地方给大家一个下载地址的链接
下面是我安装Android Studio的过程，很详细，如果你是安卓开发的朋友可以跳过

• 第一步
  

  第1步.png

• 第二步：点击取消(意思是你没有相关的Android的SDK，我们先取消跳过)
  

  第2步.png

• 第三步：点击next
  

  第3步.png

• 第四步：选择版本，这个地方我选择的是Standard

第4步.png

• 第五步：选择主题样式，随你便
  

  第5步.png

• 第六步：下载相关的依赖库
  

  第6步.png

• 第七步：下载完成，点击finish
  

  第7步.png

• 第八步：Android Studio主界面，此时大家可以看到没有一个选项叫做Start a new flutter project,那么我们继续在终端中运行flutter doctor,来查看还有什么错误，发现最后的那个错误还在，大家可以看下，上面说的是缺flutter和dart插件，所以我们要在Android Studio中安装这两个插件
  

  第8步.png

首先打开Android Studio偏好设置

androidstudio偏好设置.png
然后选择Plugins在其中搜索flutter即可，然后点击右侧的安装（这个地方我已经安装了所以显示的是uninstall卸载）。安装成功之后系统会自动安装dart所以不用再安装这个
flutter插件安装.png

之后我们在运行flutter doctor

最终完成.png
最后一个是真机调试，无关紧要，然后我们关闭Android Studio发现主界面多了一个选项
里面就有了flutter选项了.png
我们新创建一个flutterAPP
flutterapp.png
选择第一个，下一步
flutterapp路径设置.png
然后直接下一步，这个地方一定要注意的是，第一次创建过程会非常的慢，因为第一次创建的时候，会去从google下载gradle，所以会很慢，我等了10几分钟都没有下载，后来直接丢在公司慢慢下载，第二天来看的时候就好了（实际肯定不需要这么久，但是都到了这一步了，希望大家坚持下吧）
选择模拟器.png
点击运行，最开始的时候大家点击那个模拟器选项的时候应该是open iOS Simulator点击就可以了
运行成功界面.png

• 最后预祝大家安装顺利