原文作者：hillel.dev/
发布时间：2021年3月17日
虽然我们是用Flutter来构建Invoice Ninja的web应用，但这并不是我们最初的计划。我们在使用Vue.js进行大重写的六个月时，有机会第一次尝试Flutter Web（当时叫Hummingbird），并立即被说服。当然......性能还达不到原生的水平，但是能够在移动、web和桌面上共享我们几乎所有的代码，这个优势太大了，不能错过。
也就是说，在一般情况下，你不能只是 "flutter run -d chrome"，并期望你的移动应用程序是一个伟大的Web应用程序。我们发现有两个方面我们需要关注。UI布局和键盘支持。
UI布局
我认为我们的应用是一个比较标准的商业应用。它是用flutter_redux构建的，使用REST API来支持CRUD操作（创建、替换、更新和删除）。移动应用中的主要视图可以分解为三个部分：侧栏导航、列表视图和详情视图。
处理移动/桌面差异的常见方法是使用LayoutBuilder。虽然我们在应用中的某些地方会用它来稍微调整布局，但我们不会用它来调整整个UI。移动端和桌面端之间的导航模型差异太大，无法在两个平台上实现最佳体验。
在移动应用中，每个屏幕都是自己的路线。如果你查看客户列表，然后选择一个客户，在堆栈上会有两条路线。而在桌面版中，我们使用了一个 "路由 "字符串，UI会将其绑定到这个字符串上。如果路由是/invoice/view，UI就会显示发票列表，并在侧面显示视图面板。
这种双导航方式在Flutter中实现起来比较简单。在移动端的MaterialApp主部件中，我们设置了路由列表，而在桌面端我们提供了一个onGenerateRoute函数来代替。
另一个关于我们如何调整移动UI的例子是仪表板。在移动端，它是一个有多个标签的单屏，而在桌面端，我们使用两个主要的标签作为中心内容，然后在侧面显示其余的标签。滚动是与所选的标签链接的，所以改变一个标签会自动改变另一个标签。
在移动应用中，客户端屏幕使用ListTiles来显示客户的发票、报价等内容。如果你点开发票选项，你会看到按当前客户过滤的发票列表。
桌面应用的表现也是一样的，当你点开发票选项时，发票列表会被选定的客户过滤。我们在顶部显示了一个过滤菜单，使用Romain Rastel的超赞的overflow_view包实现，可以轻松地在所有客户的记录之间切换。
还有一个选项可以将过滤器作为侧栏显示在屏幕左侧。这提供了一个广泛的数据视图，使你能够轻松地在记录之间导航，同时你的上下文保持固定。
键盘支持
内置的日期和时间选择器有键盘选项，但是如果你的用户需要选择多个值（例如，在一个表格中），他们可能会很麻烦。
为了解决这个问题，我们实现了日期、时间和持续时间选择器，使其更容易用键盘选择值。所有的widget都使用相同的基本原理：我们使用FocusNode来检测文本字段何时有焦点，解析字符串以获得新的值作为预览显示，然后在widget失去焦点时更新它。
零碎的东西 我们在部署应用后遇到的一个挑战是，由于我们使用PWA，当我们发布新版本时，用户可能会继续使用旧版本一段时间。即使强行刷新页面，也会使用缓存的版本，而这个版本（我相信）可能会停留24小时。Majid Hajian很友好地分享了这个解决方案，如果有新版本，它会通知用户。
我们目前使用本地存储来持久化web应用的状态。虽然可以使用浏览器设置来清除存储，但我发现支持一个 ?clear_local=true 属性来清除存储是很有用的，当后台看到设置的标志时，它会显示这个 JavaScript 来清除存储。
window.onload = function() {
window.localStorage.clear();
}
如果你需要更多的控制标签焦点遍历的工作方式，你可以将你的widget包裹在FocusTraversalGroup widget中并设置策略，我们在应用中使用WidgetOrderTraversalPolicy。
最后的想法
虽然Flutter Web是一个神奇的技术，我们还没有用它来重建我们的整个网络应用。我们使用Flutter为我们的用户经常使用的管理门户，但更多人较少使用的客户端门户是使用标准的HTML/CSS构建的。我们认为两者的结合为每组用户提供了最佳的性能曲线。
谢谢你的阅读 我在Twitter上@hillelcoren，我录制了一个关于Flutter的播客，你有时可以在我的副项目mudeo.app（也是用Flutter构建的）上看到我在录制音乐。
通过www.DeepL.com/Translator（免费版）翻译
