突然觉得flutter挺不错的，想学一下，就花点时间学下，做个简单的demo吧，以便完善自己的技术栈。
最早做移动端的时候，是做一个体操比赛的打分器程序，运行在android平板或手机上，要实时与服务器通讯，当时采用的是ionic这个框架，大概是2015年的时候，那时候，ionic还是js作为底层来写，后面ionic支持angular、vue、reace等前端框架来编写了。ionic也可以调用原生的一些功能，比如调用手机的蓝牙啊，摄像头啊，这些都是通过cordova来实现的，当时还写过一个蓝牙的ios插件；是以webview作为媒介，js与原生代码进行互相调用。
后面又陆续的出现了一些其他的类似这种框架，比如阿里开源的weex，采用vue作为底层支持框架进行开发。然后后面兴起react native号称可以将react native代码编译成各自的平台对应的源码进行运行。
还有最近今年也比较流行的uni-app，也是可以跨各种端，除了支持android、ios外还支持各种平台的小程序，也是一套代码多次运行。并且小程序的标准也是uni-app最先提出，最后将技术标准捐献给工信部旗下的HTML5中国产业联盟；微信团队经过分析，于2016年初决定上线小程序业务，但其没有接入联盟标准，而是订制了自己的标准。
当然还有更牛的，比如Dropbox公司，采用的是C++来开发跨iOS和android平台的代码。用C++肯定是很高效的，这个毋庸置疑。但是Dropbox最后还是宣布放弃C++的方案，采用原生平台语言开发。主要原因是，业务扩展后，没有相应的会C++且懂移动开发的人才能补上来。
# 从移动app的开发模式说起
# Native App
传统的原生APP开发模式,Android基于Java语言,底层调用Google的 API;iOS基于OC或者Swift语言,底层调用App官方提供的API
优点：
- 体验最好
- 直接依托于操作系统,交互性最强,性能最好
- 功能最为强大,特别是在与系统交互中,几乎所有功能都能实现
缺点：
- 人员投入大
- 开发成本高,无法跨平台,不同平台
Android和iOS上都要各自独立开发Android上基于Java开发,iOS上基于OC或Swift开发,相互之间独立,必须要有各自的开发人员 - 门槛较高，
Android,iOS都需要独立学习 - 更新缓慢,特别是发布应用商店后,需要等到审核周期
- 维护成本高，
iOS和Android需要同时维护
# Web App
移动端的网站,将页面部署在服务器上,然后用户使用各大浏览器访问。一般泛指 SPA(Single Page Application)模式开发出的网站
优点：
- 人员投入少
- 开发成本低,可以跨平台,调试方便
- 维护成本低
- 更新最为快速
缺点：
- 性能低,体验最差
- 功能受限,大量功能无法实现只
- 依赖于网络,页面访问速度慢,耗费流量
- 如果是一个单独的
WebApp由于用户体验差被苹果官方的拒绝上架
# Hybrid App
混合开发,由Native通过JSBridge等方法提供统一的API,然后用Html5+JS来写实际的逻辑,调用API,这种模式下,由于Android,iOS的API一般有一致性,而且最终的页面也是在webview中显示,所有有跨平台效果
优点
- 体验适中，人员投入适中
- 对于复杂的实现可以采用原生进行
- 对于简单多变的，可以采用
webview进行
缺点
- 不适用于交互性较强的
app - 相比原生,性能仍然有较大损耗
# React Native App
React Native 是Facebook发布的，可以让我们广大开发者使用JavaScript和React开发我们的应用，该提倡组件化开发，也就是说React Native给我们提供一个个封装好的组件让开发者来进行使用，甚至我们可以相关嵌套形成新的组件。
使用React Native我们可以维护多种平台(Web,Android和IOS)的同一份业务逻辑核心代码来创建原生应用。
现阶段Web APP的的体验还是无法达到Native APP的体验，所以这边fackbook更加强调的是“learn once, write everywhere”，应用前端我们使用js和React来开发不同平台的UI，下层核心模块编写复用的业务逻辑代码，提供应用开发效率。
| 技术类型 | UI渲染方式 | 性能 | 开发效率 | 动态化 | 框架代表 |
|---|---|---|---|---|---|
H5+原生 | WebView渲染 | 一般 | 高 | 支持 | Cordova、Ionic |
JavaScript+原生渲染 | 原生控件渲染 | 好 | 中 | 支持 | RN、Weex |
自绘UI+原生 | 调用系统API渲染 | 好 | Flutter高, QT低 | 默认不支持 | QT、Flutter |
# 先说说什么是flutter
Flutter 是 Google推出并开源的移动应用开发框架，主打跨平台、高保真、高性能。开发者可以通过 Dart语言开发 App，一套代码同时运行在 iOS 和 Android平台。 Flutter提供了丰富的组件、接口，开发者可以很快地为 Flutter添加 native扩展。同时 Flutter还使用 Native引擎渲染视图，这无疑能为用户提供良好的体验
Flutter没有使用原生控件，相反实现了一个自绘引擎，使用自身的布局、绘制系统。
2017年Google I/O大会上，Google首次推出了一款新的用于创建跨平台、高性能的移动应用框架——Flutter。2018年2月，Flutter发布了第一个Beta版本，同年五月， 在2018年Google I/O大会上，Flutter更新到了beta 3版本。2018年6月，Flutter发布了首个预览版本，这意味着Flutter进入了正式版（1.0）发布前的最后阶段。
# 采用Dart语言开发
什么是Dart语言？
Dart是谷歌开发的计算机编程语言，后来被Ecma (ECMA-408)认定为标准 。它被用于web、服务器、移动应用和物联网等领域的开发。它是宽松开源许可证（修改的BSD证书）下的开源软件。
Dart是面向对象的、类定义的、单继承的语言。它的语法类似C语言，可以转译为JavaScript，支持接口(interfaces)、混入(mixins)、抽象类(abstract classes)、具体化泛型(reified generics)、可选类型(optional typing)和sound type system
2018年2月，Dart2成为强类型语言。
Dart学习与介绍更多 (opens new window)
掘金Flutter专栏 (opens new window)
# 安装开发环境
以macOS为例
- 配置访问环境
vi ~/.bash_profile
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
source ~/.bash_profile
- 下载
SDK
可以直接在github上下载最新的版本即可，建议下载不带pre版本的，或者去官网下载稳定版也可以。github (opens new window),
官网 (opens new window)
- 解压，配置环境变量
export PATH="pwd/sdk/flutter-1.17.0/bin:$PATH"
- 验证安装
flutter doctor
如果报以下错误,则需要在本地建一个git的映射，最简单的方式就是git init即可
Error: The Flutter directory is not a clone of the GitHub project.
The flutter tool requires Git in order to operate properly;
to set up Flutter, run the following command:
git clone -b beta https://github.com/flutter/flutter.git
在或者通过git clone -b stable https://github.com/flutter/flutter.git进行sdk的下载就自带了.git目录。
然后还会报一其他的未安装的错误，我觉得无伤大雅，比如我的xcode已经被卸载了，我可以先开发，使用android进行调试。只要看着符合自己的开发环境没问题就可以，并不是要解决所有的错误。
- 配置
android环境
配置android sdk这个就是下载sdk后，配置一下环境变量即可
vi ~/.bash_profile
ANDROID_HOME=/Volumes/free/work/sdk
export PATH=${ANDROID_HOME}/tools:${ANDROID_HOME}/platform-tools:${PATH}
source ~/.bash_profile
当我们把配置放到了~/.bash_profile中，如果启动的窗口是zsh，则配置到bash中的文件，不会生效。可以按如下方式处理
在~/.zshrc中，加入source ~/.bash_profile即可让bash中的配置生效。
开发工具配置
VS-Code
在vscode的插件市场搜索flutter，然后选择安装即可，顺便把dart插件也装一下。创建项目
- 点击
查看>Command Palette或快捷键Shift + Command + P - 输入
flutter，选择Flutter: New Project - 输入项目名字，选择存放路径
vscode右下角选择目标设备- 直接
F5即可运行，或者运行>启动调试
如果在运行报Android SDK licences相关的错误，在android sdk的tools/bin下运行sdkmanager --licenses后，点y即可