Flutter 是 Google 在 2017 I/O 大会上推出的全新 UI 框架,目前主打移动平台,包括 Android 和 iOS,未来还会扩展到其它平台,包括桌面平台。经过一年多时间的发展,Flutter 团队于 2018/12/4 号正式释放出了 1.0 版本。本文先对 Flutter 的技术架构做一个对比介绍,然后讲解如何安装配置 Flutter 开发环境,最后通过编写和运行一个 Hello World 应用来学习如何使用该开发环境。

本文属于 JW Flutter Demo 文章系列,相关代码已在 GitHub 开源 JW Flutter Demo。如果想全面深入学习 Flutter,欢迎选购笔者制作的视频课程 Flutter 移动应用开发实战

关于 JW Flutter Demo

JW Flutter Demo(简称 JWFD) 是一个讲解 Flutter 组件(Widget)和 API 用法的开源项目,里面会对各种常用的 Flutter 组件和 API 以示例的方式来讲解其用法。其中许多示例都是来自于笔者开发的 围观 APP 的经验总结,如果想体验 Flutter 应用的实际性能,欢迎下载安装。

Flutter 是革命性的

相比于 React Native 之类的 Hybrid 移动应用开发技术,Flutter 可以说是革命性的。Flutter 有自己的组件渲染层,而不是依赖于系统组件渲染,它仅仅需要底层系统的 Canvas 和 Events 支持。笔者之前使用过 React Native,如果只是做数据展示还好,一旦 UI 交互比较多或者调用原生功能,坑就比较多。加上 Facebook 的支持力度不够,生态系统发展比较缓慢,可用的类库很少且质量不高,开发工具支持也不太完善,后来就逐渐放弃了。直到遇到了 Flutter,让人眼前一亮,当时就非常看好其技术前景。在使用 Flutter 开发完一款完整应用后,更加笃定了这种看法。

下面通过设计架构来对比一下各类移动开发技术,以此来说明为什么 Flutter 是革命性的。

Native APP

738f9d3e4f451b0796ed76b070bc583d

Native APP 使用原生 SDK 来开发,可以直接与系统通信,比如创建 UI 或访问系统相机。架构简单,性能高效,但需要为每个平台单独开发 APP。每个平台采用的技术都不一样,开发语言也完全不同,因此开发成本比较高。

H5 APP

5d9ff44f90953fbe0516d9fb8f8d2aaf

H5 APP 使用 Web 技术来开发移动应用,大大降低了 Web 前端开发人员进入移动开发领域的门槛。这类技术框架的代表有 PhoneGap、Cordova、Ionic 等,在应用内内嵌一个 WebView 来渲染 UI,本质上就是内嵌的网页。调用原生系统功能需要通过一个 Bridge 来完成。由于 WebView 的性能跟原生应用差距较大,此类技术基本已被淘汰。

Hybrid APP

9081ff763ad73254aca18adaf76fd2d2

Hybrid APP 使用 JavaScript 来编写 UI 组件,但这些组件最终会转换成对应的原生组件来渲染。因此具有同原生应用的外观,性能接近于原生应用。不过不管是组件渲染还是原生功能调用都需要经过 Bridge,因此在 UI 比较复杂、动画效果很多或原生功能调用非常频繁的场景,就会出现性能瓶颈。

Flutter APP

d4388e172f16374760a15d7a88ad3605

Flutter 使用静态类型的 Dart 语言来开发,代码会预编译为平台原生代码,这样就可以直接跟原生平台通信,从而省去了使用 Bridge 带来的上下文切换开销。这是它在架构上区别于其它技术的最重要的点。

相比于其它技术,Flutter 具备以下优点:

  1. 采用响应式视图,但不需要 Bridge。
  2. 快速、流畅、可预测,代码会预编译为原生代码。
  3. Dart 语言兼具动态语言的灵活性和静态语言的安全性。
  4. 带有大量美观,可定制的 UI 组件。
  5. 强大的开发者工具,惊人的热加载速度。
  6. 性能更好,兼容性更好,开发起来更有乐趣。

当然,还有最不值得一提的跨平台!

Flutter 开发环境搭建

如果是初次接触 Flutter,建议先阅读官方文档 Get started,学会如何搭建本地开发环境,以及开发和运行你的第一个 Flutter 应用。

下面以笔者使用的 macOS 开发环境为例,来做一个粗略的讲解。

安装 Flutter 开发工具包

下载跟你操作系统对应的安装包,安装完成后需要添加 flutter/bin 路径到 PATH 里,以便后续可以找到 flutter 命令。安装完成后执行 flutter doctor 来验证是否安装成功,后续如果开发环境出现问题,也可以运行此命令来进行诊断。

具体步骤可参考 官方文档

国内由于被墙的缘故,下载安装包和其它资源时可能会失败或很慢,可以参考官方针对中国区的 说明文档

安装平台编译工具

Flutter 代码在运行之前会预编译为原生代码,因此需要安装各平台的原生开发工具。对于 Android 平台需要安装 Android Studio,iOS 平台需要安装 Xcode。只需要把这些工具安装好就可以,后续开发过程中可以不使用这些工具,直接通过命令行或 IDE 来编译代码和运行应用。

这些工具的安装步骤比较繁琐,具体步骤可参考 官方文档

安装 IDE

IDE 目前有两种选择,Android Studio/IntelliJ 和 VS Code。其中 Android Studio 和 IntelliJ 算是同一种,Android Studio 底层也是用的 IntelliJ IDE,不过它们都比较重型。推荐使用 VS Code,比较轻量,熟悉 Sublime Text 编辑器的用起来会更顺手。安装好 IDE 后记得安装 Flutter 插件。

具体步骤可参考 官方文档

编写 HelloWorld 应用

创建项目

打开 VS Code,按照以下步骤来创建 Flutter 项目:

  1. 从菜单栏依次选择 View > Command Palette,将打开命令面板。
  2. 输入 flutter,然后选择 Flutter: New Project,将打开创建新项目的对话框。
  3. 输入项目名字,比如 myapp,然后回车确认.
  4. 选择存放新项目的目录。
  5. 稍等一会儿项目就会创建完成,此时会自动打开 main.dart 文件,也即是程序的 Main 入口。

也可使用命令行工具来创建项目:

$ flutter create --org org.example --description "My first app." myapp

其中 --org 为应用包路径,一般为应用所属个人或组织的域名倒序,跟最后的应用名一起组成完整的应用 ID。该 ID 代表应用的身份,提交到应用市场时,每个应用的 ID 不能重复。

编写代码

替换 main.dart 文件里的内容为如下:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

上面的代码里创建了一个名为 MyApp 的无状态组件,代表整个应用。该应用是一个 MaterialApp,标题为“Welcome to Flutter”,标题用在 Android 系统的进程管理里,对 iOS 系统没有用。页面结构为标准的 Scaffold,顶部 AppBar 的标题为“Welcome to Flutter”,页面主体内容是一段居中显示的文字“Hello World”。

可以看到 Dart 代码非常清晰易懂,配合 IDE 的自动提示功能,编写 Dart 代码的过程也非常愉悦。如果对 Dart 语言不了解,可以先学习这篇官方的 Language Tour 来掌握基本用法。文章不长,如果熟悉 JavaScript,个把小时即可阅读完。

运行 HelloWorld 应用

  1. 在 VS Code 底部的 status bar 里,会显示已经连接上的手机设备,如果没有会显示 No Devices。点击 No Devices 将打开模拟器选择对话框,选择一款 Android 或 iOS 设备来启动模拟器。对于真实的手机设备,需要按照“安装平台编译工具”步骤里的说明配置设备和安装相关工具才能连接上。
  2. 确保已经连接上手机设备或者启动了模拟器,从菜单栏选择 Debug > Start Debugging 或者按 F5 键,即可启动调试。此时会先编译应用代码,然后部署到手机设备或模拟器并启动应用。
  3. 调试过程中,如果代码有任何更新,将通过 Hot Reload 及时更新到运行中的应用里。还可使用右上方的调试工具条执行单步调试、Hot Reload 和停止运行等操作。

VS Code 调试界面:

-----2018-12-29-11.58.19

红米 3S 手机运行效果:

更多资料

  1. JW Flutter Demo 文章系列
  2. JW Flutter Demo 开源项目
  3. JW 课程 - Flutter 移动应用开发实战
  4. 围观 APP