在 Node.js 上运行 Flutter Web 应用和 API

做者：Brian De Sousa

翻译：疯狂的技术宅

原文：https://blog.logrocket.com/fl...

未经容许严禁转载

大量的跨平台应用开发框架，使你能够编写一次代码，而后在 Android，iOS 等多个平台上甚至在台式机上运行。你可能据说过一些流行的框架，例如 Ionic，Xamarin 和 React Native。另外一个相对较新的框架是 Flutter。

在本文中，你将学到一些有关 Flutter 的知识，特别是对 Web 的支持，该支持最近在 v1.9 版中可做为技术预览版本使用。你将能够向现有的 Flutter 程序中添加 Web 支持，并将其与简单的 API 一块儿在 Node.js 服务器上运行。

Flutter 简述

Flutter 是 Google 跨平台开发解决方案之一。虽然它出现的时间不是很长，但其功能集使其成为该领域的强大的竞争对手。

它将你的程序编译为可在 iOS 或 Android 上运行的原生代码，从而得到使人难以置信的性能和帧率。它支持在开发期间进行有状态的热重启，这意味着你能够随时对代码进行更改，并观看它们在模拟器或物理设备上的应用，而无需从新启动程序或丢失程序状态。

Flutter 主要关注 iOS 和 Android。在 1.9 版中已将 Web 支持添加为技术预览。它仍处于起步阶段，可能还没有准备就绪，但确定使人兴奋且充满但愿。正如你将很快看到的那样，只需进行一点的修改便可使用现有的 Flutter 应用并将其编译为 HTML、CSS 和 JS 包。

为何在 Node.js 上运行 Flutter Web 程序？

Flutter Web 应用能够在任何 Web 服务器上运行。那么为何要在 Node.js 服务器上托管 Flutter Web 程序呢？好吧，老实说，出于与其余 Web 应用和 API 选择 Node.js 的相同缘由：它很是擅于服务大量的简单请求，你能够用 JavaScript 在其中编写前端和后端代码等。

你可能已经有了一个 Node.js API，可将数据提供给 Flutter iOS 或 Android 程序。将 Flutter 程序编译为 Web 应用并将其托管在现有的 Node.js 服务器上多是当前解决方案的逻辑扩展，而无需增长额外的托管成本。

示范

如今该深刻研究代码，看看 Flutter web 的实际应用了。你须要如下工具：

• Android Studio（Android SDK 管理器和模拟器）
• Visual Studio Code + Flutter 扩展（或 Android Studio）
• Node.js 12

Flutter 有出色的开发人员文档。若是这是你第一次开发 Flutter 程序，请按照“入门”指南进行设置。

本文中的示例和说明基于 Visual Studio Code，但若是你选择使用 Android Studio，则仍然能够继续学习。

须要 Node.js 12 才能运行 Flutter Weather 程序的 Web 版本以及后端 Weather API。

步骤1：探索示例代码

为了演示如何向现有的 Flutter 应用添加 Web 支持，咱们将从一个简单的气象应用开始，该应用已在 Android 10（API level 29）上进行了测试。

weather app 容许用户查看预约义城市的当前天气。天气数据是从运行在 Node.js 上的后端服务器中检索的。

从 GitHub 复制 weather app 和服务器的源代码：

• briandesousa/weather_app_flutter
• briandesousa/weather-app-nodejs-server

提示： weather-app-nodejs-server 项目库有一个 Flutter-web-support 分支，其中包含已启用 Flutter Web 支持的可在服务器运行的完整版本。

最好将两个项目的存储库克隆到同一个父文件夹中。将建立 weather_app_flutter 存储库的内容并将其复制到 weather-app-nodejs-server 存储库内的文件夹中。

探索 Flutter 天气应用

在编辑器中打开 weather_app_flutter 。让咱们仔细看看 main.dart 文件。它包含构成程序用户界面的脚手架和小部件。 Home 窗口小部件类具备 fetchWeatherData 函数，该函数调用后端天气 API 来检索数据并更新窗口小部件的状态：

fetchWeatherData({String location}) async {
    var url = WEATHER_API_URL + location;
    final response = await http.get(url);
    if (response.statusCode == 200) {
        var jsonResponse = convert.jsonDecode(response.body);
        setState(() {
            this._weatherData = WeatherData(
                jsonResponse\['weather'\]['location'],
                jsonResponse\['weather'\]['temperature'],
                jsonResponse\['weather'\]['weatherDescription'],
            );
            this._apiError = null;
        });
    } else {
        setState(() {
            this._apiError =
                'Unable to retrieve weather data from API (HTTP ${response.statusCode})';
        });
    }
}

fetchWeatherData 函数使用 Dart 的 http 包经过 HTTP 链接到服务器。你还可使用其余 Dart 包，可是若是你打算向 Flutter 程序添加 Web 支持，则这是官方推荐的包。

同时记下 WEATHER_API_URL 常量。在运行程序以前，请先更新此常量的值，以便它能够链接到本地 Node.js 服务器上运行的 API。该网址必须包含你计算机的主机名。 Android 模拟器或物理设备没法访问 localhost URL。

探索 Node.js 服务器和天气 API

在编辑器中打开 weather-app-nodejs-server 项目代码。

其中有一些重要的文件和目录：

• public/api-test.html 文件可用于快速测试启动后服务器是否按预期工做（例如，`http://localhost:3000/api-test.html）
• routes/weather.js 文件包含一个简单的 GET API，该 API 接受 path 参数并返回天气数据（例如，http://localhost:3000/api/weather/londonon）
• 你能够在 public-flutter 文件夹中复制气象程序的已编译 web 版本。设置 Node.js 服务器以将文件从该目录提供到根上下文（例如，http://localhost:3000）

步骤2：向 Flutter 应用添加 web 支持

因为目前 web 支持还是技术预览，所以须要最新的 Flutter 开发中版本，也称为master channel。在 weather_app_flutter 存储库的根文件夹中，运行如下命令：

flutter channel master
flutter upgrade

提示：在Windows上的 Visual Studio Code 的 bash shell 中运行 Flutter 命令时，你可能会遇到 “Unknown operating system. Cannot install Dart SDK.”错误。请尝试在普通的 Windows command shell中运行命令。

升级过程可能须要几分钟。接下来你将须要在 Flutter 安装中启用 Web 支持：

flutter config --enable-web
flutter devices

启用 web 支持后，你将在设备列表中看到一个新的 Chrome 设备。若是没有看到 Chrome，请在运行如下命令刷新设备列表菜单后从新启动 Visual Studio Code。

要将网络支持添加到 weather app，你须要在 weather_flutter_app 项目的顶级文件夹中运行如下命令：

flutter create .

create 命令将对该程序进行一些修改，你能够在这个提交中看到。最值得注意的变化是添加了一个包含 index.html 的子文件夹 web ：

经过在 weather-app-nodejs-server 的根目录中运行如下命令来启动 Node.js 服务器：

npm start

从 Visual Studio Code 的设备列表中选择 Chrome，而后开始调试。或者，你能够运行如下 flutter命令：

flutter run -d chrome

因为 Flutter 须要即时下载其余依赖项时，你第一次在 Chrome 中启动该应用可能会花费一些时间。 最终你将在浏览器中看到天气应用正在运行。可能会有某些样式与你在仿真器或物理设备上看到的样式略有不一样。

你会注意到该应用没有显示来自天气 API 的任何数据。若是你打开 Chrome DevTools，则会看到跨域资源共享错误。

浏览器不容许 Flutter Web 服务器向 Node.js 服务器发出请求，由于它们运行在不一样的端口上。你能够经过在服务器上启用跨域资源共享或安装 Chrome 插件来禁用 CORS 来解决此问题。

咱们如今将忽略这个错误，由于在下一步中，咱们将直接在 Node.js 服务器上运行预编译的 Flutter Web 代码，从而彻底消除跨域请求。

尝试修改 main.dart 文件中的某些代码，而后让 Flutter 从新编译你的程序。你会发现所作的修改不会当即显示在浏览器中。这是由于 Flutter Web 尚不支持热重启。但愿不久后可以提供这种支持。

提示：本节中每一个 Flutter 命令的详细说明均可以在 flutter.dev 上找到。

步骤3：在 Node.js 上运行 Flutter Web 应用

如今你能够用 Flutter 在浏览器中运行 weather app，下一步是构建并将其复制到 Node.js 服务器，以与 API 一块儿运行。

要构建 Flutter Web 应用捆绑包，请运行如下命令：

flutter build web

build 命令将生成 build/web 文件夹，其中包含构整天气应用的全部静态文件。

把 weather_app_flutter/build/web 的内容复制到 weather-app-nodejs-server/public-flutter。若是你的 Node.js 服务器仍在运行，请从新启动。

经过在的浏览器中访问 http://localhost:3000 ，查看在Node.js上运行的程序。此次你的应用程序将会显示从天气 API 检索到的天气数据，而不会出现跨域资源共享错误。

最后的想法

取得现有 Flutter 应用并将其编译为可部署到 Web 服务器的 Web 应用如此简单，真是使人难以置信。浏览器中呈现的用户界面看起来几乎与 Android 中的界面相同。

可是不能仅仅因为 Flutter 的 Web 支持而将 Flutter 视为跨平台应用程序框架。 Flutter 团队很是清楚， Web 支持缺乏功能，存在已知的性能问题而且还没有彻底支持生产环境。

能够确定的是：Flutter for Web 的将来看起来颇有但愿。你能够在这里了解有关 Flutter Web 支持和 Hummingbird 项目更多的信息。

---

本文首发微信公众号：前端先锋

欢迎扫描二维码关注公众号，天天都给你推送新鲜的前端技术文章

欢迎继续阅读本专栏其它高赞文章：

• 深刻理解Shadow DOM v1
• 一步步教你用 WebVR 实现虚拟现实游戏
• 13个帮你提升开发效率的现代CSS框架
• 快速上手BootstrapVue
• JavaScript引擎是如何工做的？从调用栈到Promise你须要知道的一切
• WebSocket实战：在 Node 和 React 之间进行实时通讯
• 关于 Git 的 20 个面试题
• 深刻解析 Node.js 的 console.log
• Node.js 到底是什么？
• 30分钟用Node.js构建一个API服务器
• Javascript的对象拷贝
• 程序员30岁前月薪达不到30K，该何去何从
• 14个最好的 JavaScript 数据可视化库
• 8 个给前端的顶级 VS Code 扩展插件
• Node.js 多线程彻底指南
• 把HTML转成PDF的4个方案及实现

---

• 更多文章...