[译] 为 JavaScript 程序员准备的 Flutter 指南

• 原文地址：Flutter for JavaScript Developers
• 原文做者：Nader Dabit
• 译文出自：掘金翻译计划
• 本文永久连接：github.com/xitu/gold-m…
• 译者：lsvih
• 校对者：bambooom

为 JavaScript 程序员准备的 Flutter 指南

Flutter 是一款用同一套代码构建高性能、高保真的 iOS 及安卓应用的跨平台移动端应用 SDK。

文档中提到：

Flutter 包括一个 react 风格的框架、一个 2D 渲染引擎、一些预制的插件以及开发者工具。

文本但愿能快速为 JavaScript 开发者们提供一个简练的入门指南，我会试着以 JS 与 npm 生态系统来类比 Flutter / Dart 与 Pub 包库。

若是你对最新的 Flutter 教程、库、公告及社区的更新感兴趣，我建议您订阅双周刊 Flutter Newsletter。

---

我在 React Native EU 的演讲 React Native — 跨平台及超越中讨论并演示了 React 生态系统中 React Native Web、React Primitives 和 ReactXP 的不一样之处，而且我也有机会讨论 Weex 及 Flutter 的不一样之处。

在尝试 Flutter 以后，我认为它是近几年我所关注的前端技术中最让我激动的一个。在本文中，我将讨论为什么它如此令我激动，并介绍如何尽量快的入门 Flutter。

若是你认识我，那么我知道你正在想什么…

我是一名有着超过两年半经验的 React 与 React Native 开发者。如今，我仍然看好 React 和 React Native，而且我也知道有许多大公司正在使用它们，但我仍然乐于看到其余的能达到相同目的的想法方法，这无关乎我是否要去学习或改变技术栈。

Flutter

我能够作个归纳：Flutter 使人惊叹, 我相信近几年它会成为更多人的选择。

在使用了几周 Flutter SDK 以后，我正在应用它制做个人第一个 App，我十分享受这个过程。

在我开始介绍如何入门 Flutter 前，我将首先回顾一下我对它的 SDK 的优缺点的见解。

优势

• 内置由核心团队维护的 UI 库（Material 及 Cupertino）。
• Dart 团队与 Flutter 团队紧密合做，专门针对 Flutter 优化移动设备的 Dart VM。
• 有着崭新的、酷炫的文档。
• 强大的 CLI。
• 我能轻松、顺利地入门与运行它，没有碰到各类障碍与 Bug。
• 开箱即用的热加载功能，使得调试的体验至关好。此外，还有一系列关于调试技术的很好的文档。
• 有由核心团队构建并维护的 nav 库，可靠且有见地。
• Dart 语言诞生 6 年了，至关成熟。虽然 Dart 是一种基于类的面向对象编程语言，但若是你想用函数式编程，Dart 也有着做为第一公民的函数，而且支持许多函数式编程结构。
• Dart 比我想象中的更容易入门，我十分喜欢它。
• Dart 是一种无需任何多余配置的开箱即用的强类型语言（好比：TypeScript、Flow）。
• 若是你用过 React，会发现它有相似的状态机制（好比 lifecycle 方法与 setState）。

缺点

• 你要去学习 Dart（相信我，这很简单）。
• 仍在测试中。
• 目标平台仅为 iOS 和安卓。
• 插件生态系统还很稚嫩，pub.dartlang.org/flutter 在 2017 年 9 月还只有 70 余个包。
• 布局与编写样式须要学习一种全新的范式与 API。
• 须要学习不同的项目配置（pubspec.yaml vs package.json）。

入门及其它观点

• Flutter 文档推荐了 VS Code 编辑器与 IntelliJ IDE。尽管 IntelliJ IDE 内置支持热加载、在线加载这些 VS Code 没有的功能，但我仍是选择使用安装了 Dart Code extension 插件的 VS Code 编辑器，并获得了很好的开发体验。
• Flutter 有一个模块系统，或者叫包管理系统 —— Pub Dart Package Manager，它与 npm 有不少不一样点。它的好坏取决于你对 npm 的见解。
• 我以前并无 Dart 相关的知识，但我很快就入门了。它让我想起了 TypeScript，而且与 JavaScript 也有一些类似之处。
• 文档中有几个至关不错的代码实验室与教程，建议去查阅一番：1. 构建 UIS 2. 增长 Firebase 3. 构建布局 4. 增长交互

说的够多了，如今让咱们开始建立一个新的工程吧！

在 macOS 中安装 CLI

若是你使用的是 Windows，请查阅 此文档。

如需查看完整的 macOS 平台下的安装指南，请查看 此文档。

首先，咱们须要克隆包含 flutter CLI 二进制文件的 repo，而后将其添加到系统目录中。好比我将 repo 克隆到了专门用于存放二进制文件的目录下，而后将这个新目录加到了 $HOME/.bashrc 和 $HOME/.zshrc 文件中。

1. 克隆 repo：

git clone -b alpha https://github.com/flutter/flutter.git
复制代码

2. 增长路径：

export PATH=$HOME/bin/flutter/bin:$PATH (或者填你选择的安装路径)
复制代码

3. 在命令行中运行 flutter doctor，检测 flutter 路径能被正确识别，并安装一切所需的依赖：

flutter doctor
复制代码

安装其它依赖

若是你要部署 iOS app，那么必须安装 Xcode；若是你要部署安卓 app，那么必需要安装 Android Studio。

了解关于安装这两个不一样平台的知识，请参阅文档：文档。

建立你的第一个 Flutter app

如今咱们已经安装好了 flutter CLI，能够建立咱们的第一个 app 了。请运行 flutter create 命令：

flutter create myapp
复制代码

此命令会帮助你建立一个新的 app，进入新目录，打开 iOS 模拟器或安卓模拟器，运行如下命令：

flutter run
复制代码

此命令会在你打开的模拟器中运行 app。若是你同时打开了 iOS 与安卓模拟器，你能够用下面的命令来将程序传入指定的模拟器：

flutter run -d android / flutter run -d iPhone
复制代码

也能够同时运行：

flutter run -d all
复制代码

此时你应该在控制台中看到了关于重启 app 的信息：

项目结构

你正在运行的代码处于 lib/main.dart 文件中。

你会发现有一个 andoird 文件夹和一个 iOS 文件夹，原生的项目存在这些目录中。

项目的配置在 pubspec.yaml 中，此文件与 JavaScript 生态系统中的 package.json 相似。

如今将目光转向 lib/main.dart。

在文件的头部，能够看见一个 import：

import ‘package:flutter/material.dart’;

这个依赖文件是哪儿来的？请查看 pubspec.yaml 文件，能够发如今依赖列表中单独有一个 flutter 依赖项，在这儿是引用的 package:flutter/。若是想添加或导入其它依赖项，那么须要将新的依赖加入 pubspec.yaml，而后用过 import 来使用它们。

在 main.dart 的头部，咱们还能够看到有一个名为 main 的函数。在 Dart 中，main 是一个特殊的、必要的、顶级的函数，也是 app 开始执行的地方。由于 Flutter 是由 Dart 构建的，main 也是这个工程的主入口。

void main() {
  runApp(new MyApp());
}
复制代码

此函数调用了 new MyApp()，这个类。与 React App 相似，有一个由多个组件组合而成的主组件，而后调用 ReactDOM.render 或 AppRegistry.registerComponent 进行渲染。

Widget

Flutter 技术总览中的一个核心原则就是：“一切皆 Widget”。

Widget 是每一个 Flutter app 的最基本的构建模块。每一个 Widget 都是用户界面的一个不可变定义。与其它框架分离视图、控制器、布局和其它属性不一样，Flutter 有着统一的、一致的对象模型：Widget。

类比 Web 术语或 JavaScript，你能够将 Widget 当作与 Component 相似的东西。Widget 一般由内部类构成，这些类可能包含或不包含一些本地状态（local state）或方法。

若是你观察 main.dart，能够发现相似 StatelessWidget、StatefulWidget、Center、Text 的类引用。这些都是 Widget。若是想了解全部可用的 Widget，请查阅文档。

布局与编写样式

虽然 Dart 和多数 Flutter 框架都很容易使用，但进行布局与编写样式让我最开始头疼了一阵子。

须要重点注意的是，与编写 Web 样式不一样，以及与 React Native 的 View 会完成全部的布局和一些样式不一样，Flutter 的布局由你选择的 Widget 类型及自己的布局与样式属性共同决定，也就是说它一般取决于你使用的 Widget。

例如，Column 能接收多个子 Widget，但不接受任何样式属性（CrossAxisAlignment 及 direction 等布局属性除外）；而 Container 能接收各类布局及样式属性。

Flutter 还有一些布局专用的组件，好比 Padding，它仅能接收一个子 Widget，但除了给子 Widget 添加 padding（边距）以外不会作其它任何事。

请参考这个完整的 Widget 列表，能帮你使用 Container、Row、Column、Center、GridView 及其它有着本身布局规范的组件实现布局。

SetState 及生命周期函数

与 React 相似，Flutter 也有有状态、无状态组件或 Widget。有状态组件能够建立、更新、销毁状态，与 React 中使用的生命周期函数相似。

在 Flutter 中，也有一个名为 setState 的函数用来更新状态。你能够在咱们刚才建立的项目的 _incrementCounter 方法中看到此函数。

更多信息请查阅：StatefulWidget, State 和 StatelessWidget。

总结

做为专门制做跨平台应用的开发者，我会保持关注 React Native 的竞争对手。对于客户来讲，也多了一种选择，他们可能会由于某些缘由而要求使用 Fluter。我认为 Flutter 为个人客户带来了一些他们想要的东西，好比内置的类型系统、一流的 UI 库、由核心团队维护的 nav 库等。

我会把 Flutter 加入个人技术栈中，当碰到 React Native 没法解决的问题和状况时，我将会使用 Flutter。只要我以为能够将它用于生产环境，我会向客户展现个人第一个 Flutter app，供他们选择这个技术。

我叫 Nader Dabit，是一名 AWS Mobile 的开发者，开发了 AppSync、Amplify 等应用，同时也是 React Native Training 的创始人。

若是你喜欢 React 和 React Native，欢迎在 Devchat.tv 订阅咱们的 podcast - React Native Radio。

此外，Manning Publications 已经出版了个人书 React Native in Action，欢迎阅读。

若是你喜欢这篇文章，请点个赞吧~

---

掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。