Flutter介绍

 

Google 在 2018 世界移动大会上发布 Flutter 的 Beta 版本。
Flutter 是 Google 用以帮助开发者在 Android 和 iOS 两个平台，同时开发高质量原生应用的全新移动 UI 框架。
Flutter 兼容现有的代码，免费且开源，在全球开发者中广泛被使用。

【Flutter中文网】

【Flutter的GitHub地址】

一、Flutter优缺点

优点：

1. 性能强大，流畅 
2. 路由设计优秀 
3. 单例模式 
4. 优秀的动画设计 
5. UI跨平台稳定 
6. 可选静态的语言，语言特性优秀

缺点：

1. 假装跨平台，躲不开原生代码 
2. 组合而不是继承的思路 
3. Widget的类型难以选择 
4. 糟糕的UI控件API 
5. 糟糕的资源管理设计 
6. 墙 

总结

Flutter主要的坑就在于需要非常了解原生的环境，其实跨平台的框架都是如此，想要通过跨平台的API就拿下双端的开发任务，对认真学习的原生开发者来说也是不公平的。
主要的优势则在于动画流畅，很多开发者反应比原生安卓还流畅（存疑），至少在iOS上是看不到卡顿的，安卓上动画也很稳定，性能上展示了Google的硬实力

 

二、flutter跟React Native、Weex等区别

React Native、Weex等一直存在一个问题，就是性能跟原生App存在很大的差异。这跟它们的原理有很大的关系，下面从原生App，RN、Weex，Flutter的简单原理说一下它们的不同。

• 原生App
  苹果2008年发布iOS，Google 2009年发布Android，它们的SDK是基于两种不同的编程语言Objective-C 和 Jave.现在又有了Swift和Kotlin。

   

  

  上面是原生App的一个简单架构，开发人员直接调用平台SDK进行UI开发。由于语言及SDK的不同，所以开发人员必须为两个平台分别开发App。

• WebViews
  最早的跨平台方案是基于JaveScript 和 WebView的，像PhoneGap、Cordova、Ionic等。

   

  

  UI通过WebView来显示html代码，系统服务则通过一个中间层桥接到JaveScript中去。

• React Native
  RN不仅桥接系统服务，也将系统UI也桥接到了JaveScript中，这样写出来的UI最终也会渲染成原生的控件。

   

  

  如上图这样，UI的渲染是很频繁的，要使UI不卡顿，必须达到60Fps。但是桥接会花一定的时间。所以这样的架构有时候会有性能问题。

• Flutter
  Flutter使用Dart语言开发，Dart可以被编译（AOT）成不同平台的本地代码，让Flutter可以直接和平台通讯而不需要一个中间的桥接过程，从而提高了性能。

   

  

   

三、flutter安装教程

安装步骤：

1.由于国内被墙，需要设置下载镜像

1 2 3

export PUB_HOSTED_URL=https://pub.flutter-io.cn   export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

2.从github下载flutter包

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

3.设置flutter为全局可执行

1	export PATH="$PWD/flutter/bin:$PATH"

4.安装flutter所需相关依赖（可能安装时间较长，请耐心等待）

完毕之后可能会有issues提示，部分工具或依赖未安装。

我在安装完毕之后

1）.提示需要android studio、ios toolchain、Intelij等，这三个工具选择安装其一即可，我选择的是安装andriod studio sdk，issue上有下载地址。

下载andriod studio也较慢，需要耐心等待（本人通过代理下载）。

下载完毕之后，执行flutter doctor -v，查看，提示你为andriod sdk变量未配置

配置andriod studio sdk环境变量

1	vim ~/.bash_profile

添加变量配置

1 2 3 4

export ANDROID_HOME=/Users/bytedance/Library/Android/sdk // 这个路径可以通过issue提示获取 export PATH=${PATH}:${ANDROID_HOME}/tools export PATH=${PATH}:${ANDROID_HOME}/platform-tools export PATH=$HOME/flutter/bin:$PATH

　保存然后执行：

1	source ~/.bash_profile

　　此时在执行flutter doctor -v，可以看到提示变量已配置

1	注意: 如果你使用的是zsh，终端启动时 ~/.bash_profile 将不会被加载，每次都必须source一次才能起作用，很烦。解决办法就是修改 ～/.zshrc ，在其中添加：source $HOME/.bash_profile，完美解决。

2）.还有提示Android licenses问题，按照描述执行指令，一直同意即可

3)在android sdk配置后变量之后，还提示需要安装flutter plugin和dart plugin

打开android studio，选择右上角菜单 android studio => Preferences=>Plugins 搜索安装flutter和dart即可

5.如果顺利通过前四步，基本算是大功告成了吧。（通过flutter doctor -v查漏补缺）

6. 设置Android模拟器

1 2 3 4 5 6 7 8

要准备在Android模拟器上运行并测试您的Flutter应用，请按照以下步骤操作：   在您的机器上启用 VM acceleration . 启动 Android Studio， 顶部菜单Tools > AVD Manager 并选择 Create Virtual Device. 选择一个设备并选择 Next。 为要模拟的Android版本选择一个或多个系统映像，然后选择 Next. 建议使用 x86 或 x86_64 image . 在 Emulated Performance下, 选择 Hardware - GLES 2.0 以启用 硬件加速. 验证AVD配置是否正确，然后选择 Finish。

7.创建新应用

1 2 3 4 5

选择 File>New Flutter Project 选择 Flutter application 作为 project 类型, 然后点击 Next 输入项目名称 (如 myapp), 然后点击 Next 点击 Finish 等待Android Studio安装SDK并创建项目.