小试 Flutter

发表于 更新于 分类于

Flutter 是什么

我觉得可以理解为 Google 做的 React Native/Weex，目标也是使用一套代码，同时运行在 Android 和 iOS 上，提供 Native 的性能和体验，也都支持热更新，只不过 Flutter 使用 Dart 语言，React Native 使用 JavaScript，据说 Flutter 的性能要比 RN 好一些，因为没有使用 JSBridge 这样的结构，直接使用 Dart 来操作 Native 控件，具体可以参考它的官网：https://flutter.io/

Flutter 官方文档

上图，Flutter 官方文档的结构，和 React Native 都很像！

最近 Flutter 不知道怎么就火了，之前有人给我提过，现在准备一探究竟

环境搭建

类似 React Native，Flutter 也是同样的套路，需要先下载它的命令行工具，由于需要兼容 iOS，所以还是推荐使用 macOS 来进行开发

由于网络问题，需要设置两个环境变量

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

然后在 Flutter 的官方 Github clone 它的命令行工具，git clone -b dev https://github.com/flutter/flutter.git，这里建议使用 dev 分支，能及时更新到一些新功能，同时也比 master 分支要稍稳定一些

clone 完成后，将 flutter 目录下的 bin 目录，添加到环境变量 PATH 当中，并 chmod 成可执行的

然后在终端中使用flutter命令，第一次运行时，会自动补全 SDK 需要的组件，接着，如果出现以下结果，证明基本 SDK 安装成功

Flutter 命令

接下来需要执行flutter doctor来检测缺失和建议的组件、插件，如图所示，Flutter 建议使用的 IDE 包括：Xcode、Android Studio、Intellij IDEA 和 VSCode，这些工具的安装，这里就不再赘述了

doctor

由于我已经全部安装了需要的插件，所以并没有提示缺少组件，如有组件缺失，可能会有以下的报错信息：

1
2
3
4
5
[-] Android toolchain - develop for Android devices
    • Android SDK at /Users/obiwan/Library/Android/sdk
    ✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ
    • Try re-installing or updating your Android SDK,
      visit https://flutter.io/setup/#android-setup for detailed instructions.

根据提示修正即可，一些组件的安装，会直接给出对应的命令，十分人性化

iOS 的开发环境，需要安装libimobiledevice和CocoaPods，以下是安装命令：

1
2
3
4
brew update
brew install --HEAD libimobiledevice
brew install ideviceinstaller ios-deploy cocoapods
pod setup

对于 Android 开发来说，除了需要根据要求安装好对应的 SDK，并同意相关的 Lisences（许可协议）以外，Android Studio 或者 IDEA，还应该安装 Dart 和 Flutter 插件（需要在 Settings/Preferences->Plugins 中的 Browse repositories 中搜索），安装完成以后，Android Studio 的欢迎页会多出一个新建 Flutter 工程的选项

Android Studio

这样建立 Flutter 工程就十分方便了

Start Flutter

如果使用 VSCode 作为开发工具，直接去商店里搜 Dart 和 Flutter 扩展安装重启 VSCode 即可，之后可以使用 F1 唤出命令输入框，键入 Flutter 执行相关操作，也十分简单

VSCode

强烈建议使用这种插件的形式来建立 Flutter 工程，当然，如果喜欢使用命令行，可以参考 Flutter 官网

至此，Flutter 的基本环境也就搭建完成了

运行一个 Demo

如果使用 Android Studio 开发，运行一个 Demo 工程十分简单，毕竟是 Google 自己定制的 IDE，对 Google 的框架支持十分完美，如下图所示

Demo

在对代码进行修改并保存后，Android Studio 会自动调用 Flutter 命令行的 Reload 命令进行热刷新，如果使用命令行启动 APP，则需要在命令行里按『R』键触发，这和 RN 在设备里直接操作的方式有点不同

使用 Flutter 进行 APP 开发

Dart

Dart 是 Google 开发一门编程语言，风格有点像 Kotlin，但语法又有很多和 Java 相似的地方（不知道 Google 搞这么多语言干什么？），可以用于移动端（主要是 Flutter）、Web 端和 Server 端程序的开发，其中 Web 端的 Dart 还可以转换为 JavaScript

官网：https://www.dartlang.org/

基本语法：https://www.dartlang.org/guides/language/language-tour

吐槽一点：现在的各大公司都搞一套自己的这种语言，微软的 TypeScript、苹果的 Swift、JetBrains 的 Kotlin、Google 的 Dart、Go 等等，真的是让人学不动！！！

由于 Flutter 采用 Dart 语言来开发，所以需要稍微适应一下这种又像面向对象，又像脚本的语言

程序入口（Entry Point）

和 React Native 类似，Flutter 也有一个固定的程序入口，一般被写成如下的形式：

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

组件（widget）

组件在 React Native 中被称为 Component，在 Flutter 中被称为 Widget，所有的组件都继承于这个 Widget 类

Flutter 的组件

其中，最常用的组件有以下几个：

  • Text：用于展现文本
  • Row 及 Column：行/列，用于 FlexBox 风格的布局
  • Stack：一种栈式布局方式，和 LinearLayout 这种“栈”式布局不同，Flutter 的 Stack 用于实现 View 的层次布局
  • Container：约束布局，类似 Android 的 ConstraintLayout 和 iOS 的 AutoLayout

以下介绍几种常用的 widget：

布局（Layout）

Flutter 的布局组件分为单子元素布局、多子元素布局和布局工具类

一般的组件，根据是否包含需要变化的状态，分为 StatefulWidget 和 StatelessWidget 两个抽象类，可变的状态，用于响应用户点击事件、更新数据或者 UI 等，和 React Native 中使用 state 变化刷新 UI 的方式有些类似

在上面程序代码中，MyApp一般就是一个 StatelessWidget，如下代码所示，覆盖 build 方法，来创建一个 APP 最基础的 Widget

1
2
3
4
5
6
7
class MyApp extends StatelessWidget {
  
  @override
  Widget build(BuildContext context) {
    // 创建 App 最基础的 Widget
  }
}

输入（Input）

  • 用于获取用户输入，如：Android 的 EditText，iOS 的 UITextField，Flutter 中称为：Form 和 FormField

  • 用于捕获键盘事件，如：Android 的 OnKeyListener，Flutter 中称为：RawKeyboardListener

图像（Assets、Images、Icons）

用于获取 APP 中用到的所有图像、图标等

组件包含：Image、Icon、RawImage、AssetBundle

样式（Styling）

包括 Padding、Theme 和 MediaQuery，主要用于对子 Widget 进行统一的样式管理

异步（Async）

分为 FutureBuilder 和 StreamBuilder，其中 FutureBuild 类似 Java 中 Future 的用法，用于实现一种异步的任务执行模型，实际写法有些类似 JavaScript 的 Promise，可以用来实现网络 API 的请求

而 StreamBuild 用于实现异步的流式读取，可以用来下载网络文件

特别的 UI 组件库

Flutter 对基于 Android 平台 Material Design 风格的组件，以及 iOS 风格的 Cupertino 组件进行了封装，方便开发者直接使用，保证 APP 的样式统一

对于 Material Design 组件，包括我们熟知的：Drawer、Appbar、FloatingActionButton、SnackBar 等

Material Design

有关设计风格，可以参考 Material Design 的官方文档：https://material.io/guidelines/material-design/introduction.html

iOS 的 Cupertino 设计风格从 iOS 7 开始一直沿用至今，也是非常成熟、优雅的 UI 设计理念，这里不再阐述了，实际开发中根据需要和 Flutter 文档使用即可

其他组件

还有一些包括手势、动画、滚动、绘图等组件，可以满足日常的开发需求，其他的组件说明及用法，可以参考：https://flutter.io/widgets/

总结

刚接触 Flutter，由于之前对 React Native 的印象，总让我感觉有一丝熟悉，但好像又无从下手，后面准备看看一些 Example，写一些小 Demo 练练手，然后再进一步研究一下

未完，待续……