当前位置: 代码迷 >> 综合 >> Flutter 2020:跨平台状态
  详细解决方案

Flutter 2020:跨平台状态

热度:69   发布时间:2023-09-13 12:47:57.0

已兑现承诺

Flutter 2020:跨平台状态

Flutter cross-platform promises: mobile, web, and desktop

Flutter是Google支持的跨平台框架,可实现跨平台软件开发。

这意味着Flutter应用程序可以从一个代码库开发,构建并部署在多个平台上。

承诺

单一的代码库承诺非常诱人。 您可以用更少的资源,更少的时间,有时甚至是更少的技能(而不是更少的技能)来始终如一地”完成所有工作”,这一事实是不容忽视的。

制作一个在所有设备(同一平台)上保持相同外观的应用程序本身就是一个挑战。 跨平台实现此目标,同时保持每个平台特有的微妙UI / UX机制,当您为每个目标平台使用不同的技术和方法时,可能很快变成一场噩梦。

没有人愿意花更多的钱,如果他们可以花更少的钱。 大多数客户希望他们的想法尽快准确地转化为产品,因此在花时间方面也是如此。

考虑到您需要在多个平台上使用您的应用程序,并且您选择的跨平台技术为您的功能提供了正确的支持,随着时间的推移,金钱变成了简单的数学运算,它证明了跨平台开发的时间和成本效益更高。 需要您的应用程序提供。

如果仅针对一个平台和/或您的应用程序中有一些核心功能很难/几乎无法使用X跨平台技术,那么跨平台可能不是您的正确选择。

有时,使用跨平台技术在单个平台上实现正确处理可能比使用本机开发进行正确处理要昂贵得多。

许多客户认为他们的软件需要事先考虑成本和技能,这是很容易的:更新的成本/难度如何?

假设您预算巨大,一切顺利,并且您的应用是本地构建的,并已部署在所有平台上:移动,网络和桌面。 他们按照预期的方式工作,每个人都很高兴。

一段时间(2-3年)后,您想更新这些应用程序,并且原始开发人员不可用,或者他们对这些技术的支持终止。 现在该寻找具有适当技能的人员来更新您的Android(Java),iOS(Objective-C / Swift),网络(HTML / CSS / JS +当时流行的前端框架), Windows(C ++ / C#)和macOS(Objective-C / Swift)应用程序(考虑到后端API也不需要更新)。 仅找到具有适当技能的适当人员,在正确的页面上放置他们,并获取要包含的更新并在所有平台上一致地部署,这可能是一个巨大的挑战。

乐观地说,那些开发人员还在身边,他们可以提供支持。 沟通需求,更新所有应用程序并在所有平台上部署将花费多少时间?

现在,假设所有这些应用程序都来自Dart / Flutter中的单个代码库,而您只需要一支能够与Flutter合作的团队(可能只有一个人)就能更新所有应用程序。

Flutter努力兑现这一承诺。

在这一阶段,Flutter非常有能力,有望成为跨平台软件开发的首选解决方案。

已交付

首先,您需要一个编辑器来编写您的应用程序代码。您可以使用任何文本编辑器和命令行工具来编译您的应用程序,尽管这会有些乏味并且浪费您的时间。 编辑器有一些选项:Visual Studio代码(VS Code),Android Studio,IntelliJ等。 我使用VS Code(免费),有时使用IntelliJ(付费)。 IntelliJ提供了许多不错的功能,例如自动保存,是我使用过的最好的IDE,尽管目前我不将其用于Flutter项目。 我选择的Flutter编辑器是VS Code。

第二,您将需要安装Flutter。 您可以在macOS,Windows,Linux和Chrome操作系统上执行此操作。

Flutter有4个主要渠道(分支):稳定版,测试版,开发者和母版。 从左到右,新功能的增加,支持水平和整体稳定性下降。 我们将使用Flutter的最新(并非总是)最出色的主频道。

要查看您在哪个通道上,可以在TERMINAL选项卡中使用命令颤动通道。 输出将是:

Flutter channels: master dev beta* stable

要将通道切换为主通道,应使用抖动通道主通道,然后在” TERMINAL”选项卡中使用抖动升级。 将会有简短的下载和带有状态的摘要输出。

第三步(也是最后一步)是测试您可以创建一个包含所有内容的项目。 使用”视图—命令面板”…,然后键入Flutter,您可以选择Flutter:New Project。 如果在”输出”选项卡中没有错误弹出窗口,那您就好了。

Flutter 2020:跨平台状态

The OUTPUT tab after successfully creating a Flutter project

因此,让我们深入了解Flutter在2020年可以做什么:

移动端

Flutter可以使用单个代码库为iOS和Android编译您的应用。

默认情况下,当我们从Flutter的任何渠道创建项目时,我们都可以为移动(电话/平板电脑)iOS / Android编译该项目。

flutter devices命令将显示可用设备(已连接到开发计算机)。 例如,在我的机器上,它输出:

4 connected devices:AndroidDevice

? 94dcba0c

? android-arm64

? Android 10 (API 29)iOSDevice

? 000507e0a52252f43eaa151dcbc4ebfa52bd92f0

? ios

? iOS 13.3.1Chrome

? chrome

? web-javascript

? Google Chrome 80.0.3987.149Web Server

? web-server

? web-javascript

? Flutter Tools

如果我们运行flutter run命令,则该项目将在上面列表中的第一个设备上编译并以调试模式(默认模式)运行。 就我而言,该设备是Android设备。

Flutter 2020:跨平台状态

Flutter sample app running on an Android device

要在特定设备上运行,您可以使用设备ID(每个子列表中的第一个)。 例如,要在我的iOS设备上运行,我将使用flutter run -d
000507e0a52252f43eaa151dcbc4ebfa52bd92f0命令。

Flutter sample app running on an iOS device

要在iOS上运行,您需要一台运行macOS的计算机。 无需实际的iOS设备。 模拟器将完成这项工作。 Android也是如此。

网页

使用Flutter的所有渠道(稳定版除外),您还可以选择运行和构建Web平台。

要在网络JavaScript平台上运行,我们可以使用flutter run -d chrome或flutter run -d web-server。

第一个选项可在Chrome浏览器中运行该应用。 顾名思义,第二个在Web服务器中运行该应用程序。

选项之间的区别在于,第一个选项可在Chrome中启动应用程序,而另一个选项仅提供您可以使用首选浏览器导航到的地址。 此外,Chrome选项允许进行高级调试和配置。

The sample app running in Microsoft Edge & Internet Explorer 11, Opera, Chrome, Firefox, and Safari

警告:Flutter对Web开发的支持还不稳定,并且尚未在生产环境中进行全面测试。

桌面

与处于测试阶段的Web平台不同,在开发/功能/支持方面,桌面平台至多处于早期alpha状态。

我们将介绍从最先进到最少的受支持的操作系统:

· 苹果系统

在我们刚刚使用主通道创建的项目中,flutter config –enable-macos-desktop命令将支持在macOS上进行桌面应用程序开发(请注意,只有在运行macOS的计算机上才能运行和构建此类应用程序)。

如果运行未连接物理设备的抖动设备,则会得到:

3 connected devices:macOS

? macOS

? darwin-x64

? Mac OS X 10.15.3 19D76Chrome

? chrome ? web-javascript

? Google Chrome 80.0.3987.149Web Server

? web-server

? web-javascript

? Flutter Tools

要将特定于构建的文件夹添加到我们的项目中,我们必须运行flutter create ..

最后,要在macOS上运行我们的桌面应用程序,我们使用flutter run -d macOS命令。

Flutter 2020:跨平台状态

Flutter sample app running on macOS

警告:尽管macOS是最先进的桌面平台,但仍处于测试阶段。

· Windows

在我们刚刚使用主通道创建的项目中,flutter config –enable-windows-desktop命令将启用对Windows上桌面应用程序开发的支持(请注意,只有在运行Windows的计算机上才能运行和构建此类应用程序)。

如果运行未连接物理设备的抖动设备,则会得到:

3 connected devices:Windows

? Windows

? windows-x64

? Microsoft Windows [Version 10.0.18362.720]Chrome

? chrome ? web-javascript

? Google Chrome 80.0.3987.149Web Server

? web-server

? web-javascript

? Flutter Tools

要将特定于构建的文件夹添加到我们的项目中,我们必须运行flutter create ..

最后,要在Windows上运行我们的桌面应用程序,我们使用flutter run -d Windows命令。

Flutter sample app running on Windows

警告:当前的Windows Shell是早期的技术预览。 最终嵌入的API可能与当前的API表面明显不同。

· Linux

在我们刚刚使用master通道创建的项目中,flutter config –enable-linux-desktop命令将启用对Linux上桌面应用程序开发的支持(请注意,只有在运行Linux的计算机上才能运行和构建此类应用程序)。

如果运行未连接物理设备的抖动设备,则会得到:

1 connected device:Linux

? Linux

? linux-x64

? Linux

要将特定于构建的文件夹添加到我们的项目中,我们必须运行flutter create ..

最后,要在Linux上运行桌面应用程序,我们使用flutter run -d Linux命令。

我在Windows 10计算机上将Ubuntu 18.04 LTS设置为WSL(Linux的Windows子系统)。 在一段时间内,可以在Windows内运行Linux。 不幸的是,我无法成功让Xming UI运行示例应用程序。

然后打开以在Windows上使用VirtualBox,由于某种原因,VirtualBox无法安装Ubuntu。

最终,我设法使VirtualBox在macOS上运行Ubuntu文件。

Flutter 2020:跨平台状态

Flutter sample app running on Linux (Ubuntu)

警告:当前的Linux shell是GLFW占位符,以允许早期试验。 最终外壳的API与当前实现会有根本的不同。

总结

我们设法使示例应用程序在移动设备(iOS和Android),Web(在Microsoft Edge和Internet Explorer 11中,Opera,Chrome,Firefox和Safari浏览器中)和台式机(macOS,Windows和Linux系统)上运行。

尽管没有正式的支持,但有了一些黑客手段,我们甚至可以使示例应用程序在Raspberry Pi(IoT上下文)上运行。

您可能已经注意到,我仅将应用程序的默认标题修改为Fluttering UP! (在不久的将来对此有更多的了解),并通过使用
debugShowCheckedModeBanner删除了调试横幅:MaterialApp为false。

此外,还要注意的另一点是,在Flutter附带的示例应用程序的呈现上存在细微差异(不同平台之间呈现的颜色,字体,阴影,大小有所不同,在Web平台/浏览器的情况下, 浏览器到浏览器)。

桌面平台还没有关于稳定性和可用性的信息,但是正处于正确的轨道。

如果要开始使用Flutter,可以直接进入默认的示例应用程序并从那里开始。 有很多资源可供发现和用于构建您的应用程序。 您还可以从Dart的一些基础知识开始,Dart是使这一切成为可能的秘密武器(编程语言)。

在这一阶段,Flutter非常有能力,有望成为跨平台软件开发的首选解决方案。