在-Nodejs-上运行-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 个方案及实现

---

• 更多文章 …