Flutter

Posted on By ᵇᵒ

Prologue

在昨天的 2018 MWC 上 Google 发布了 Flutter 的 Beta 版本。
Flutter 是什么? 官方定义的原话:

Flutter is Google’s mobile UI framework for crafting high-quality native interfaces on iOS and Android in record time. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source.

简单的说就是一套用于在 iOS 和 Android 两个平台开发高质量原生引用的移动 UI 开源框架(其实还支持 Fuchsia 平台)。

Fuchsia & Flutter & Dart

Fuchsia:Google 正在研发的新操作系统,据说欲取代 Android,但以 Google 的尿性,不好说,说不准。
Flutter:Fuchsia 的开发框架,支持导出 Android iOS 和 Fuchsia 三个平台的安装包
Dart:以上两者服务的官方编程语言

Installation

官网有手把手的安装教程,这里记录一下,算个简单的翻译和总结吧。
特别值得一提的是,因为臭名昭著的 GFW,Google 很热心地为身处国内的开发者提供了镜像地址(严格地说不是 Google 提供的)。
对于世界各地普通的开发者来说,安装流程如下:

$ git clone -b beta https://github.com/flutter/flutter.git
$ export PATH=`pwd`/flutter/bin:$PATH
$ flutter doctor

对于国内的开发者来说,需要先将一些依赖下载替换为镜像地址:

$ export PUB_HOSTED_URL=https://pub.flutter-io.cn
$ export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
$ git clone -b dev https://github.com/flutter/flutter.git
$ export PATH="$PWD/flutter/bin:$PATH"
$ cd ./flutter
$ flutter doctor

NOTE:

  • 在 Terminal 里使用 export 只会在当前 Terminal 里有效,最好永久保存在环境变量里。
  • flutter doctor 会自动检查安装环境,根据提示再一步一步手动安装缺少的依赖,非常简单无脑。
  • 克隆分支也可以换为 beta 版,以后应该还会有 RC Release 等版,大公司的版本发布还是比较正规的。

Hello World

flutter安装完成后,就可以开始创建我们的第一个app了(这里以 Android 为例,默认大家都已配好 Android 环境)。

$ flutter create myapp
$ cd myapp
$ flutter devices
$ flutter run

flutter create myapp 创建的应用在 Android 上包名默认为com.example.myapp
flutter devices 用于查看当前连接的设备。
flutter run 可以加参数 --release 编译 release 版本。

Hot reload

flutter 支持 Hot reload 功能,应用运行成功后,再对项目进行的修改只需要保存后在 Terminal 里按 r 便可在设备上看见更新。

NOTE

  • 热加载必须是针对当前 Terminal 连接着的应用。如果仅仅是连着数据线,Terminal 并没有连接设备上打开应用,改动是无法传递到设备上的。
  • r 是 Hot reload,R 是重新运行。
  • Hot reload并不会真正地把改动部署在设备上,只是起到一个临时演示的效果。只有重新运行才会把改动部署在设备上,Google 大概是考虑到大部分开发者无法做到一次修改效果到位,还是比较傻瓜人性化的。

Configure Editor

上面只是用命令行 + 简单的文本编辑方式创建了我们的第一个 flutter demo。
事实上 flutter 也支持很多 IDE,以 Android Studio 为例,安装 FlutterDart 两个插件即可创建 flutter 应用(只需要安装 Flutter 即可,它会自动安装依赖的 Dart 插件)。

插件安装成功重启 Android Studio 后多了一个 New Flutter Project 选项,根据提示一步步填下去就创建成功了。与 Terminal 创建的应用不一样的地方在于 Android Studio 创建的时候可以编辑包名。

NOTE

  • Android Studio 的 Hot reload 功能集成在顶部工具栏一个闪电⚡️图标上。

Epilogue

flutter 的简单介绍就结束了,后续研究 flutter 应用的代码结构以及 Dart 2 语言的特性。