这几年，移动跨平台的趋势可以说是越来越明显，技术实现上也是百花争艳，不过究其实现，无外乎有那么几种。

• Web 流：也被称为 Hybrid 技术，它基于 Web 相关技术来实现界面及功能。
• 代码转换流：将某个语言转成 Objective-C、Java 或 C#，然后使用不同平台下的官方工具来开发。
• 编译流：将某个语言编译为二进制文件，生成动态库或打包成 apk/ipa/xap 文件。
• 虚拟机流：通过将某个语言的虚拟机移植到不同平台上来运行。

这方面具体的介绍可以查看我之前文章的介绍：移动跨平台开发方案总结。相比较于目前比较好的跨平台开发，有几个比较好的框架：React Native，Flutter和Weex。对于React Native 想必大家应该不陌生，ReactNative 简称是RN ，是 Facebook于15年开源的一个跨平台的框架，目前已经趋于稳定。Flutter则是由Google基于Dart语言开发的一个移动跨平台开发框架，实际上就是以前的Sky SDK，是React Native的竞争对手。Weex 则是阿里开发的一套简单易用的跨平台开发方案，使用较少，没有前面两个名气大。

Flutter 和 React Native 区别

在正式介绍Flutter之前，让我们先来看一下Flutter和React Native实现上的一些异同。 
对React Native 稍有了解的读者都知道， React Native 是基于组件进行开发的，这和原生APP的开发思路是一致的，不同的是 React Native提供的组件都是继承自原生Native 的 View 组件，通过调用原生的平台组件来实现UI的绘制工作。比如React Native 中的 ListView 在 Android 中就是继承自 ListView ，还有 RecycleView，对于IOS来说则是TableView组件。

然而 Flutter 则不同，它的所有 UI 组件都是一帧一帧画出来的。Flutter不需要底层的转换操作，因而在界面绘制上更加准确灵活。其次它还非常人性化的贴近了平台的特性，比如 Android 的 Material Design 在 Flutter 就默认支持了进去。

编写语言方面，两平台都是为了推广自己的技术，Flutter 使用的是 Dart 语言开发（基本没怎么听说过），而 React Native 则使用 JSX来开发的，借鉴了React的很多东西。

Dart简介

相信并没有几个读者知道还有 Dart 这种语言，说实在的我也没怎么听过。Dart 是Google于2011年推出的定位应用编程的语言，据说目的是取代传统的JS。相比同时代的go定位服务器系统，Dart可以说并不是很成功。学习Dart可以通过中文社区来学习：http://www.cndartlang.com/。当然，Dart也提供了在线编写运行代码的功能，官方地址为：https://www.dartlang.org/。

Flutter环境搭建

Flutter是Google推出的一款是移动端跨平台开发框架，使用Dart语言编写，一套代码即可同时在Android和iOS平台运行，支持android 4.1以上 和 iOS8以上版本，官方地址为：https://flutter.io/。如果想要了解更多的内容，也可以通过官方的文档来了解：https://flutter.io/faq/#what-is-flutter。

1，下载SDK

“工欲善其事，必先利其器”，学习任何一门技术都需要先搭建相关的开发环境，并来一个Hello Word。搭建Flutter环境，读者可以通过Flutter托管在Github上的源码地址来学习。

1，首先，在mac的Terminal输入命令将Flutter SDK下载到本地。命令如下：

git clone -b beta https://github.com/flutter/flutter.git

• 1
• 2

由于我是Mac 系统，那么Flutter SDK 下载完后的完整路径为：Users/xiangzhihong/Flutter/flutter/ 。接下来需要配置环境变量，打开终端依次输入如下命令：

cd $HOME
open -e .bash_profile

• 1
• 2

添加 Flutter SDK 的路径：

export PATH=${PATH}:/Users/xiangzhihong/Flutter/flutter/bin:$PATH

• 1

然后使用下面的命令更新刚配置的环境变量。

source .bash_profile

• 1

然后使用命令行“flutter doctor”来检测其他的一些依赖，安装 Futter 剩余依赖项。

cd ./flutter
flutter doctor

• 1
• 2

这个命令会检查环境并在窗口显示报告，Dart SDK与Flutter捆绑在一起;没有必要单独安装Dart。 
 
最后，Flutter SDK下载后的路径： /Users/用户名/flutter，要注意的是flutter文件夹下面有多个同名的flutter文件夹，真正的SDK路径只到顶层flutter文件夹。

依赖安装完成后，如果不意外，输出内容如下：

Doctor summary (to see all details, run flutter doctor -v):
[] Flutter (Channel dev, v0.1.7, on Mac OS X 10.12.6 16G1212, locale zh-Hans-CN)
[] Android toolchain - develop for Android devices (Android SDK 27.0.0)
[!] iOS toolchain - develop for iOS devices (Xcode 9.2)
     libimobiledevice and ideviceinstaller are not installed. To install, run:
        brew install --HEAD libimobiledevice
        brew install ideviceinstaller
     ios-deploy not installed. To install:
        brew install ios-deploy
[] Android Studio (version 3.0)
[] Connected devices (1 available)

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

2, 安装idea插件

到jetbrains的官网下载idea开发工具，并为idea添加Flutter插件。 
 
安装完成后重启idea，在新建项目的时候左侧菜单栏有Dart和Flutter说明这两个安装完成了，右边红色方框设置Flutter SDK。 

3，测试运行项目

新建一个Flutter工程，工程名不能含大写字母。 
 
如果在创建的过程中出现如下错误，那么Close Project，然后重新打开即可。 
如果我们只想简单的实现”Hello World”，用下面的代码替换掉main.dart里面的代码即可。

import 'package:flutter/material.dart';
void main(){
  runApp(new Center(child: new Text('Hello Flutter!')));
}

• 1
• 2
• 3
• 4

然后选择模拟器运行即可。