在这篇文章中,我将告诉你关于Flutter的一切,并涵盖所有这些不同的主题。
如果您听说过Flutter,并想了解它是怎么回事,这篇文章就适合您。或者你正在考虑在你的下一个项目中使用它,并想获得一个高水平的概述。
我还会分享一些在Flutter互动大会上披露的相关内容。
而且要说明的是,这不是对Flutter与其他应用开发框架(原生iOS和Android,React Native和Xamarin)的比较。虽然这种比较很有用,但我对其他一些框架只有一点工作上的了解,我无法对它们的优势和劣势做出很好的评估。
就Flutter而言,我想告诉你我喜欢它什么,我喜欢它什么,以及哪些地方应该改进。
这完全是基于我自己使用Flutter的经验。所有意见都是我自己的。
因此,请舒适地坐下来,喝杯好酒,享受阅读。 😉
什么是Flutter
根据官方网站的介绍。
Flutter是谷歌的UI工具包,用于从一个代码库中为移动、网络和桌面构建漂亮的、本地编译的应用程序。
有很多东西使Flutter成为移动应用开发的伟大框架。而我想从关注第一大卖点开始。
多平台开发
Flutter已经可以用于Android和iOS的生产。截至2019年12月,它支持网络(beta)和桌面(alpha)。
使用Flutter,你可以在Dart中写一次代码,并在多个平台上运行。
与其他跨平台框架相比,关键的区别在于,Flutter控制着屏幕上绘制的每一个像素。
Flutter遵循特定平台的行为和惯例。这意味着Flutter应用程序在iOS和Android上看起来和感觉都是原生的。
可滚动的列表就是这样一个例子。
- 在iOS上,当我们过度滚动时,我们会得到一个原生的弹跳效果。
- 在Android上,当我们到达内容的末端时,滚动就会停止,而我们会得到一个材料飞溅的效果。
而这一切都只用了0行代码就完成了。
因此,当涉及到平台差异时,你会发现在大多数情况下,Flutter都是开箱即用的。
但当然,您可以完全控制您的应用程序的外观和感觉。例如,您可以使用任何可用的ScrollPhysics子类来覆盖默认的平台滚动物理学。
打造定制的本地UI
我们如何在 Flutter 中使 UIs 看起来像原生的?
Flutter 同时支持 Material Design 和 Cupertino 设计语言。
当您构建一个新的移动应用程序时,您很可能会使用Material design,这是一种连贯的设计语言,适用于文本、按钮、导航元素和更多。
但如果你愿意,你可以使用Cupertino的小部件。
而且你可以完全自由地定制你的用户界面在每个平台上的样子。
最简单的方法是使用所谓的平台适应性部件(如Switch.adaptive)。这些是常见的UI元素,在每个平台上看起来和感觉都是原生的。
在没有平台自适应部件的地方,你可以使用平台切换器,根据你所运行的平台选择不同的UI控件。
if (Platform.isIOS) {
// Use Cupertino on iOS
return buildCupertinoWidget(context);
}
// Use Material design on Android and other platforms
return buildMaterialWidget(context);
如果你愿意,你甚至可以在此基础上建立你自己的抽象,并在你的项目中更容易地重复使用特定平台的代码。
/// Base class to be extended by all platform aware widgets
abstract class PlatformWidget extends StatelessWidget {
PlatformWidget({Key key}) : super(key: key);
Widget buildCupertinoWidget(BuildContext context);
Widget buildMaterialWidget(BuildContext context);
@override
Widget build(BuildContext context) {
if (Platform.isIOS) {
// Use Cupertino on iOS
return buildCupertinoWidget(context);
}
// Use Material design on Android and other platforms
return buildMaterialWidget(context);
}
}
自定义样式和排版
有了Flutter,您就不会局限于Material或Cupertino应用程序的标准外观。
通过Material主题化,您可以定义高水平的风格参数,在整个应用中保持一致。
下面是在Flutter Interact上展示的相同UI元素的变化,使用了三个不同的主题。
不仅如此,最近还宣布,整个谷歌字体目录现在可以在Flutter中使用。这意味着您可以从众多漂亮的字体中进行选择,使您的应用程序变得独一无二。
当涉及到定制用户界面和排版时,Flutter真的很耀眼。而且它看起来和感觉都是原生的。
但您有没有想过,它是如何做到这一点的?
Flutter控制着屏幕上的每一个像素
Flutter 应用程序不使用每个平台上的本地 UI 控件。
相反,Flutter 配备了一套丰富的部件,这些部件是为高保真地复制原生控件而构建的。
渲染完全由Flutter SDK控制,它由Flutter框架和Flutter引擎组成。
这意味着99%的时间您都在使用Flutter框架的API。
如果您真的找不到能做您想要的事情的高级API,您可以使用Flutter引擎的API。
用Dart构建UI
使用Flutter,UI布局完全由代码构建,采用声明式风格。
你在屏幕上看到的几乎所有东西都是一个叫做Widget的UI组件。
您的整个应用程序由一个所谓的Widget-tree表示,它是由不同类型的Widget组成的。例子。
小部件树是用组合方式建立的,使用的是声明式的代码风格。
Widget buildContents() {
return Padding(
padding: const EdgeInsets.all(32.0),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RowWithLabel(
text: 'Active',
child: Switch.adaptive(
value: true,
onChanged: (value) => _platformSwitchChanged(context, value),
),
),
SizedBox(height: 60.0),
RowWithLabel(
text: 'Inactive',
child: Switch.adaptive(
value: true,
onChanged: null,
),
),
],
),
),
);
}
有了Dart,把UI作为代码来写(和读)就成了第二天性。
而且,随着你的布局变得越来越复杂,你可以把它们分解成多个小部件类,以便更好地重用代码。
声明式的UI风格对应用程序的构建方式有一些深刻的影响。
它意味着更新UI的唯一方法是改变应用程序的状态。
声明式UI是唯一的方式,由于不可能用命令式代码来更新UI,所以一大类问题和bug就完全消失了。
因此,有了Flutter,像意大利面条一样的、命令式的UI代码的日子已经过去了。
Flutter不使用任何CSS或JSX风格的语法来设计UI组件。取而代之的是,UI布局和风格设计都完全由Dart编写。
这是一件好事,因为Dart是一种通用的编程语言。
而且它支持 "UI即代码 "的控制流指令。在实践中,这样做效果非常好。
声明式UI的另一个深刻的优点是,反应式编程变得更容易实现。
你可以使用观测器(Dart中的流),将你的应用状态建模为可以随时间变化的东西。
而Flutter提供了所有必要的API来轻松地实现反应式UI。
顺便说一下,我刚才说的既适用于本地应用状态,也适用于存储在后端某处的状态。
如果你使用一个实时数据库,如Cloud Firestore,你可以编写你的应用程序,使用户界面在后端的状态变化时自动更新。
下面是一个有多个计数器的应用实例,这些计数器在多个设备上保持同步。
而这是可能的,因为它使用Firestore作为单一的真理源。
开发者体验(热重新加载)
在过去的15年里,我一直在使用各种类型的UI框架。
我不得不说,Flutter提供了我所遇到的最好的开发者体验。
这直接转化为开发者的生产力和快乐。
这在很大程度上与热重载有关,它允许我们编辑我们的Flutter代码,并以亚秒级的延迟看到它在屏幕上的转化。
当迭代UI设计时,这是一个游戏规则的改变者。
我一次又一次地实现了相当复杂的UI,只用了不支持热重载的传统语言所需时间的一小部分。
Flutter中的热重载是如此之好,以至于它实现了新的合作形式。我们可以坐在设计师旁边,实时地对UI进行修改,而不会因为我们改变了什么而不得不等待整个应用重新编译而感到尴尬。
这使我们值得为我们的应用程序增加细微的差别和细节,并使我们的设计师和用户感到高兴。
那么是什么让热重载首先成为可能呢?
Dart语言 热重载
Dart是唯一一种既能及时编译(JIT)又能提前编译(AOT)的主流语言。
当你开发你的应用程序时,你可以使用热重载的JIT编译器。
但对于发布版本,你可以使用AOT编译器,它可以生成优化的机器代码,在目标平台的物理硬件上运行。
在这方面,我发现Dart有一些非常聪明的工具基础设施,这使得它可以在模拟器、真实设备、甚至网络上运行。
一个全新的Dartpad
从2019年12月起,你可以用Dartpad编辑器直接在浏览器上测试Flutter。
这是使Flutter更容易获得的一大步。您可以尝试Flutter并使用它来制作原型,而无需安装所有必要的工具。作为额外的奖励,您可以使用Dartpad来调整预览的大小,并模拟不同的屏幕尺寸。
Dart语言的特点
Dart支持热重载,可以在多种环境下运行。
但是对于语言本身,我们能说什么呢?
有些人将Dart描述为一种平凡的,甚至是无聊的语言。
我个人觉得,这可能是一件好事。因为Dart是一种容易学习的语言,它可以完成工作,而不会变得花哨和过于复杂。
顺便说一下,我是第一个承认Dart缺乏一些有用的功能,而这些功能在其他现代语言如Swift和Kotlin中都有。
另一方面,Dart发展迅速,仅在今年,Dart团队就增加了许多语言功能,使其越来越成为一种更好的工作语言。
因此,根据GitHub的数据,Dart已经成为2019年增长最快的语言。
开始使用
好吧,那么开始使用Dart和Flutter有多容易呢?
为了回答这个问题,我们需要看一下文档、支持和调试经验。
文档
Flutter文档在我的时钟上得分很高。
Flutter网站是一个开始使用的好地方。它包括清晰的安装说明,以及各种代码实验,以帮助你熟悉基础知识。
除此之外,Flutter小部件的文档也很完善,简短的视频教程清楚地解释了你需要知道的东西。
Flutter是开源的,所以所有的文档都可以在我们最喜欢的IDE中一键搞定。这通常包括示例代码,使我们更容易采用我们还不熟悉的API。
调试
当我们开发我们的应用程序时,事情并不总是第一次就能成功。有时我们会遇到运行时的错误,我们需要对我们的应用程序进行调试。
调试工作是评估一个框架时的重要标准。在这方面,Flutter团队花了很大力气来提供有用的错误信息,以便我们能更容易地回到正轨。
除了IDE中的标准调试功能外,Flutter还配备了Dart DevTools,这是一整套工具,你可以用来监控和调试你的Flutter应用程序。
Dart DevTools最近在Flutter中被重写了,它们可以非常有用。
例如,我们可以使用Flutter检查器来查看正在运行的应用程序的整个widget树。我们可以在屏幕上 "选择 "小部件,并在小部件树上找到它们。它甚至宣布将增加一个新的布局浏览器,使我们能够直观地看到布局错误,并修复它们。
所以我鼓励你去看看它们,并在你调试和配置你的应用程序时使用它们。
如果你在VS代码上运行,你可以通过打开命令调色板并输入devtools 来找到它们。
Flutter提供了一些伟大的开发者工具。但是仍然会有一些情况,我们会被卡住。
而如果你像我一样,你会去StackOverflow找一些答案。
在这种情况下,最理想的情况是我们从调试器中复制和粘贴错误信息,并立即找到解决我们问题的正确答案。
然而,这通常不会发生。Flutter仍然是一个相当新的框架,没有那么多现成的答案,因为我们会发现更多成熟的技术。
因此,您有可能不得不第一次提出问题,并等待有人提供答案。
幸运的是,作为Flutter的开发者,我们有幸在StackOverflow上拥有自己的超级英雄。他的名字叫Remi,他一直在这里回答数以百万计的Flutter问题。我希望感谢他的所有贡献,以及他为社区带来的巨大价值。
总的来说,使用Flutter很容易上手。但如何进一步发展呢?
构建复杂的应用程序
当您构建更复杂的应用程序时,您需要考虑状态管理和应用程序架构,以便在您的代码库增长时有一个良好的基础。
您可以使用多种状态管理解决方案,每一种都有自己的优点和缺点。不仅Flutter是这样,其他主要的前端框架也是如此。
所以与构建UI和布局相比,我觉得状态管理是一个更复杂的话题。
Flutter官方网站只提供了关于状态管理的粗略概述,而 "正确的 "解决方案也因你的用例和要求而大相径庭。
幸运的是,状态管理和其他更复杂的话题在社区的很多教程中都有涉及。
一旦你很好地掌握了状态管理,你就可以在构建复杂的应用程序时充分利用Flutter了。
而更棒的是,即使在大的代码库中,热重载的响应时间也非常好。
开放源代码
Flutter最具有战略意义的方面之一是它是完全开源的。
这对很多不同的原因来说都很好。
开发是公开的,所以你可以前往Flutter的GitHub repo,查看源代码,或寻找现有的问题。
这说起来容易做起来难,因为Flutter是一个大项目,有成千上万的贡献者,也有成千上万的问题。
然而,这不应该成为担忧的原因。如果有的话,我发现这只是反映了兴趣和受欢迎的程度。
我使用Flutter已经有近两年的时间了。根据经验,Flutter团队对任何严重的问题都有非常及时的响应和解决。
就Flutter框架而言,我对关键问题的周转时间非常满意。
而且我在其他闭源SDK中没有同样的经历,在这些SDK中,问题的处理方式几乎没有透明度,而且进展也很缓慢。
自从我在测试阶段开始使用Flutter以来,它一直坚如磐石,而且它正在迅速成长。
官方软件包
Flutter有很多官方软件包没有包含在主软件库中,这些软件包可以在pub.dev网站上找到。
这些包括像共享偏好、图像选取器、相机流媒体API、地图支持和整个Firebase服务套件。
关于官方软件包,我不得不承认,事情的进展并不像主线Flutter仓库那样快。有一次,我不得不等了几个月才得到我自己的项目中需要的一些特定的Firebase功能。
最近的一个Flutter季度调查承认,官方软件包需要改进,所以我希望看到它们在未来的发展。
第三方软件包
就在2019年,更广泛的社区已经创建了数以千计的新Flutter包。
这很好,因为你不需要重新发明轮子。
然而,我想在这里提出一个警告。
虽然官方软件包通常是高质量和可生产的,但这并不总是适用于第三方的软件包。
这可能是因为Dart包经常暴露来自iOS和Android SDKs的本地API(通过平台通道)。而包的作者可能并不总是对iOS和Android的API及其相应的语言有经验。
这可能会导致包的质量降低,并有可能导致你自己的应用程序出现错误。
最高提示。在你使用多少个包的时候一定要保守。
当你选择软件包时。
- 你应该总是检查它们的分数
- 它们是否被定期维护
- 他们有多少问题
如果你找不到一个维护良好的软件包来做你需要的事情,DIY也是一种选择。
测试
编写测试让我们相信我们的代码能按预期工作,并且在我们进行修改时不会引入错误和退步。
Flutter以单元测试、部件测试和集成测试的形式为测试提供了一些很好的支持。
然而,官方文档在细节上有些不足,而且关于这个主题的教程也不多。
不用担心,因为我的Flutter课程包括了整整两个小时的测试内容。
虽然测试是伟大的,但如果它是自动化的,那就更好了。
在各种FlutterCI系统中,我使用了Codemagic和Bitrise,这两个系统足够成熟,在自动化构建、运行测试和分发我们的应用程序方面运作良好。
Nevercode(Codemagic背后的公司)值得一提,因为他们正在围绕Flutter生态系统做大量的创新。他们甚至发布了Remote Mac,如果你是Windows用户,可以用它来开发iOS的Flutter应用。
性能
这是支持Flutter的另一个要点。
在正确实施的情况下,Flutter应用程序表现出很好的性能,具有流畅的滚动和动画效果。
这主要是由于Flutter引擎的力量。
这种性能水平是其他跨平台框架无法比拟的,因为这些框架没有像Flutter那样控制渲染管线。
如果您遇到任何性能问题,Flutter附带了一套很好的工具,您可以用来对您的应用程序进行分析。
维护者的承诺
Flutter在很多方面都很好。但在为长期项目选择它之前,我们应该考虑一些额外的方面。
在评估一个框架时,寿命和维护者承诺是非常重要的。
谷歌有一个记录,就是他们以前的很多项目都会日落西山。
因此,最大的问题是:Flutter会不会和其中一些已经死亡的产品有同样的命运?
在这方面,我觉得情况恰恰相反,因为Flutter对谷歌本身来说是非常具有战略意义的。Flutter已经在iOS、Android、网页和桌面上运行,并且是即将推出的Fuchsia操作系统的主要应用开发框架。
除此之外,在Flutter互动大会上,我们已经看到了谷歌关于Flutter的愿景,作为一个便携式的UI工具包,它将在未来为更多的设备提供用户体验。
在我们结束之前,我想回答几个问题。
- 团队和企业应该使用Flutter吗?
- 哪里可以找到Flutter的开发者?
团队和企业应该使用Flutter吗?
"一次编码,多平台运行 "对企业来说是一个有吸引力的主张。
Flutter很好,因为您只需在Dart中写一次UI代码和您的业务逻辑。
只有当您需要调用Dart包没有涵盖的平台特定API时,您才需要编写Swift或Kotlin代码(随着时间的推移,这种可能性越来越小)。
而且考虑到Flutter有热重载和现代声明式API,根据我的经验。
在Flutter中构建一个应用程序所需的成本和精力是在iOS和Android上构建两个独立的应用程序的1/3。
你的里程数会有所不同,但Flutter已经成为我在多个绿地项目中的赢家。
绿地这个词在这里很关键。Flutter对新项目(或应用重写)最有意义。
另一方面,应用商店里有数以百万计的现有应用,它们是用原生的iOS和Android SDK编写的。而当涉及到将Flutter添加到现有代码库时,我们需要做出额外的考虑。
从技术角度来看,Flutter团队已经实现了将Flutter添加到现有应用程序中。
但我觉得总的来说,最大的障碍是,团队是由人组成的。有些人可能更喜欢使用原生SDK,而有些人则喜欢使用Flutter。
每个团队和每个项目都是不同的,所以Flutter应该根据具体情况进行评估。
寻找人才
在评估一项新技术时,可用人才是非常重要的。
换句话说,与iOS和Android开发者相比,找到Flutter开发者有多容易?
iOS和Android已经存在了10多年,与Flutter相比,熟悉这些SDK的开发者要多得多。
而且,作为原生的iOS或Android开发者,工作机会也多得多。我的预测是,在未来5年内,原生应用程序的开发仍将非常重要。
然而,在我们这个行业,变化是唯一不变的。而Flutter在这里将继续存在和发展。
与不太现代的原生框架相比,Dart和Flutter都比较容易学习。这意味着使用Flutter不需要那么长的时间,就可以变得富有成效。
想使用Flutter的产品团队有两个选择。
- 雇用新的Flutter开发人员,或
- 培训他们现有的应用程序开发人员使用Flutter
原生的iOS和安卓开发经验是一种有价值的技能,即使你正在构建Flutter应用程序,你也可能会用到。
但我觉得在未来,Flutter会越来越赢得开发者和企业的青睐。
总结
而在评估一种新的语言或框架时,有很多标准都会起作用。
当涉及到可移植性、语言工具化(围绕热重载)和文档时,Flutter真的很亮眼。我们可以使用Flutter来制作漂亮的、性能良好的应用程序,并在各种设备上运行。
社区很好,在使Flutter更受欢迎方面发挥了很大作用。
在我看来,Flutter最大的挑战是软件包生态系统(它还很年轻,需要成长),以及Flutter开发者的就业市场和可用性相对不高。
然而,Flutter正在不断发展壮大。而且我认为现在是学习它的好时机。
如何开始
最好的开始是Flutter网站,它包含文档、示例和代码实验。
我还推荐YouTube上的Flutter官方频道。我从Flutter in Focus和Widget of the week的播放列表中学到了很多。
而且我们可以快速地用Dartpad进行尝试。
除此之外,我的整个YouTube频道都是关于学习Flutter的。我定期添加新的教程,所有的教程都按主题和播放列表方便地组织起来。
与此同时,我还创建了一个Flutter & Firebase课程。
这是一个很好的学习方式,采用更有条理的方法,按照线性进展进行学习。
它有超过20个小时的内容,告诉你如何使用Flutter和Firebase为iOS和Android建立一个完整的、可制作的应用程序。
我的学生喜欢它。你可以查看评论,然后自己决定。
你可以通过这个链接以优惠的价格获得该课程。
参考文献
在准备这个概述时,这些文章给了我很大的启发。