面向开发人员的颤振教程:构建应用程序的分步指南


自从它被期待已久的推出以来,旋舞引起了很多关注,我们对此也很兴奋!我希望大量的非游戏应用程序会过渡到颤振,并且在预期中,我们也因此在它上面训练我们的团队。

有新的,但很少,资源分散在互联网上学习颤振。我们已经编辑了我们的颤振教程,让开发人员开始为颤振开发应用程序。

在这本面向初学者的颤振指南中,我们将涵盖:

  • 颤振:什么,如何,为什么?
  • 设置颤振。
  • 飞镖基础。
  • 颤振基础。
  • 小部件。
  • 布局。
  • 交互式小部件。
  • 设计应用程序:表单、手势和图像。
  • 列表和导航。
  • 网络。
  • JSON和序列化。
  • 依赖性管理。
  • 国家管理。
  • 测试(单元和集成)。
你可能还喜欢:Flutter: What All the Fuss Is About

颤振:什么,如何,为什么?

什么是颤振,它有什么不同?请记住,旋舞是为任何带屏幕的设备而设计的,它可以:

  • iOS和安卓。
  • 网络和桌面(苹果、视窗和Ubuntu) -甚至支持个人防火墙。
  • 汽车。
  • 树莓皮。

从谷歌上查看这段视频;这是一个很好的理解的地方——比较本地开发、混合应用程序开发、反应本地开发,最后是颤振应用程序开发。

设置颤振

颤振的设置相对简单,并且取决于您使用的操作系统;您可以查看官方颤振教程中的步骤:https://flutter.dev/docs/get-started/install

但万一你真的遇到了什么,去看看common issues with getting started on Flutter's Github

我们之所以要求你之前建立旋舞Dart因为当你安装了颤振,你也安装了飞镖。虽然您可以单独安装Dart,但这将是一个不必要的步骤。颤振将决定使用哪个Dart版本,因此安装不同版本的Dart也是不必要的。

一旦您下载并解压了颤振,当您在终端中运行颤振命令时,您应该会看到如下内容:

颤振发展

如果你是移动开发的新手,你需要下载XcodeAndroid Studio(和工具链)。一旦你建立了旋舞,搭建一个新项目只需一个命令就可以完成。

飞镖基础

颤振用途Dart language构建应用程序。要了解为什么飞镖使用,请查看我以前的博客,How Flutter was born

颤振和铬使用相同的渲染引擎,SKIA。它不与本地应用编程接口交互,而是控制屏幕上的每个像素,这给了它从遗留包袱中解脱出来的必要自由以及它所拥有的性能。

一定要给official doc一读,但我发现this one也要善于解释达特。

另外,您可以在他们的medium account

学习飞镖

查看达特语言的官方文件,a tour,以及他们的language samples

一旦你有了一个概述,如果你想要额外的练习,前往http://jpryan.me/dartbyexample/虔诚地做所有的例子。

练习,练习,练习!

在上编辑代码DartPad作为初学者,并获得更好的抓地力。我相信你很快就会起床跑步的!

我的第一个你好,世界!在达特

之后,你完成了,前往exercism,并完成他们的Dart追踪。它很时髦,所以万一它满了,你也可以做练习跑道。

颤振基础

既然您已经熟悉了飞镖,那么现在终于是时候转向飞镖了

让我们从技术概述开始here

用以下内容搭建一个新的颤振应用:

flutter create app_name

你应该看到这样的东西:

创建您的第一个应用程序

在安卓工作室打开项目,下载模拟器和安卓版本,如果还没有完成,运行项目——瞧!

颤振演示

了解您应该如何构建您的项目目录,并了解哪些文件用于何种目的。

现在,您已经设置了颤振,是时候做所有开发人员都做的事情了,使用别人的代码:)——我的意思是设置包文件:在YAML编写的公共规范。

小工具

记住——一切都是飘动中的小部件

如果您没有按照我们之前的要求阅读技术概述,请返回阅读:。你会对什么是小部件有一个大致的了解。小部件有两种类型:无国籍的有状态的

无状态小部件是那些状态不变的部件,比如按钮或图像。正如名称所述,当在屏幕上执行动作时,它不会改变其状态。

看看这个短片系列,以及它的documentation通过谷歌来深入探索它们。(我附上了这个系列的第一个视频。(

当一个小部件需要保持某个状态时,比如当前页面PageView,中当前选定的选项卡BottomNavigationBar,有状态小部件是正确的选择。状态窗口小部件可以保存窗口小部件的当前状态。有状态小部件有一个状态构建方法,而不是小部件构建方法,每次我们显式调用时都会调用该方法setState

同样,请查看the documentation(里面有视频)用于有状态的小部件。

颤振1.9发布于GDD China有大量的新功能和社区正在增加的标志。

颤振中的布局

正如我们之前所讨论的,所有东西都是一个小部件,包括布局模型。(查看documentation。(

小部件,如行、列和网格,是布局小部件(我们在屏幕上看不到),帮助开发人员排列、约束和对齐其他可见的小部件。

还有,更多的小部件!

旋舞附带了一套强大的基本小部件,例如Text,Column,Row,Stack,和Container。基本的小部件将帮助您根据需要创建自定义视图。

如果你的应用跟随material design guidelines默认情况下,颤振有很多要解决的问题。颤振提供了几个支持材料设计的小部件。它包括一些小部件,例如MaterialApp,AppBar,Scaffold等等。

颤振也包括以iOS为中心的Cupertino component包裹。它涵盖了小部件,例如CupertinoApp,CupertinoNavigationBar等等。

Cupertino导航栏

交互式小部件

到目前为止,我们已经看到了在屏幕上显示信息或排列其他小部件的小部件。对于真正的应用程序来说,同样重要的是让应用程序具有交互性,并以各种形式获得用户的输入,如手势、点击等。

为了实现这一点,颤振有许多状态完整的小部件,例如Checkbox,Radio,Slider,InkWell,Form,和TextField。这些小部件能够保持它们的状态(例如,我们在文本字段中输入的文本,是否检查了清单)。(

去看看这个example将收藏夹/非收藏夹功能添加到您的应用程序。现在,你一定很好奇旋舞中有哪些小部件?这里有一个Widget Catalog。检查所有使颤振开发变得轻松和有趣的小部件。

飘动食谱

我们开始了,是时候学习旋舞了。我指的是有多个屏幕、图像、网络依赖等等的应用。

那么,让我们开始吧。

设计应用程序

查看下面的应用插图。

示例输出

这款外观简单的应用具有以下特点:

  1. 导航抽屉:https://flutter.dev/docs/cookbook/design/drawer
  2. SnackBar:https://flutter.dev/docs/cookbook/design/snackbars
  3. 自定义字体(文本有自己的样式):https://flutter.dev/docs/cookbook/design/package-fonts
  4. 基于文本的方向(横向字体更大):https://flutter.dev/docs/cookbook/design/orientation
  5. 并且,多个选项卡:https://flutter.dev/docs/cookbook/design/tabs

注意:方向构建器独立于设备的方向。相反,它通过比较父小部件可用的宽度和高度来计算当前方向。要确定设备的方向,您可以参考(上下文)的媒体查询。方向

形式

window有一个表单小部件,可以帮助构建一个有效管理表单基本需求的表单,例如,表单状态、验证等。查看完整的公会documentation

手势

为了获得用户输入和一些时间让应用超级互动,我们最大限度地使用手势。颤振有预建的小部件来覆盖这一点。

  1. 添加材料涟漪效应:https://flutter.dev/docs/cookbook/gestures/ripples
  2. 手柄轻敲:https://flutter.dev/docs/cookbook/gestures/handling-taps
  3. 轻扫以消除:https://flutter.dev/docs/cookbook/gestures/dismissible

形象

为了让应用变得美观和吸引人,我们使用图像。“颤动”提供了一个图像小部件,可以在“颤动”应用程序中显示来自不同来源的图像。

1.显示网络图像:https://flutter.dev/docs/cookbook/images/network-image

2.用占位符和淡入动画显示图像:https://flutter.dev/docs/cookbook/images/fading-in-images

3.有时,从网络加载映像并将其缓存在本地存储中,以便下次可以快速使用,这很方便:https://flutter.dev/docs/cookbook/images/cached-images

使用列表显示更多数据

为了容纳更多的数据,我们使用列表来显示它们。列表可以是水平的,也可以是线性的。

旋舞有一个GridViewListView。这些是基本的小部件,有不同的承包商来识别它们如何被使用。

1.创建网格列表:https://flutter.dev/docs/cookbook/lists/grid-lists

2.水平创建列表:https://flutter.dev/docs/cookbook/lists/horizontal-list

3.列表可以有不同类型的项目(例如,标题和它的项目)。查看以下链接,了解如何在列表视图中涵盖此类情况:https://flutter.dev/docs/cookbook/lists/mixed-list

4.浮动应用程序栏和使用列表的嵌套滚动:https://flutter.dev/docs/cookbook/lists/floating-app-bar

5.有时,我们会将预定义的任意项目放在列表中(例如,设置类别)。在列表视图中,您可以将自定义项目(以窗口小部件的形式)传递给其子代:https://flutter.dev/docs/cookbook/lists/basic-list

6.有时,列表中的项目比屏幕的视口多。在这种情况下,一次构建所有项目是没有意义的。旋舞有一个ListView.Builder它使用惰性渲染方法高效地创建列表项:https://flutter.dev/docs/cookbook/lists/long-lists

如果您在列表中有更多的项目并希望对它们进行分页。我们写了一篇好文章:https://blog.solutelabs.com/paginate-your-data-in-flutter-7744995febd1

在屏幕间导航(路线)

大多数应用程序包含多个屏幕,以有序的方式显示数据。在颤振中,我们可以使用Navigator

查看下图,了解颤振是如何管理多条路线的。稍后,我们将讨论如何在它们之间来回导航。

颤振航线栈

1.导航到新屏幕并返回:https://flutter.dev/docs/cookbook/navigation/navigation-basics

2.将数据传递到新屏幕并检索结果。

https://flutter.dev/docs/cookbook/navigation/passing-data

https://flutter.dev/docs/cookbook/navigation/returning-data

到目前为止,我们所看到的适合小项目。但是当项目发展时,我们希望在一个地方管理所有的路线。此外,我们可能需要解决以下问题
1.我们有多少条路线?
2.如何初始化每条路由?
3.每条路线需要什么数据?等等..

3.为了有效地管理这一切,颤振公司命名了路线:https://flutter.dev/docs/cookbook/navigation/named-routes

4.在命名路由中传递参数:https://flutter.dev/docs/cookbook/navigation/navigate-with-arguments

导航到新屏幕时,这个动画怎么样?

英雄动画
5.跨屏幕动画显示小部件:https://flutter.dev/docs/cookbook/navigation/hero-animations

建立关系网

如今我们遇到的大多数应用程序通常都与第三方服务器相连,并向服务器发出获取或发布数据的请求。

在颤振中,我们可以使用超文本传输协议作为第三方发布来做到这一点:https://pub.dev/packages/http

1.从网络获取数据:https://flutter.dev/docs/cookbook/networking/fetch-data

2.提出经过身份验证的请求:https://flutter.dev/docs/cookbook/networking/authenticated-requests

3.使用web套接字:https://flutter.dev/docs/cookbook/networking/web-sockets

旋舞还有几家酒吧。别忘了看看下面的酒吧。

https://pub.dev/packages/dio

https://pub.dev/packages/chopper

使用JSON和序列化

在颤振中,我们通常有两种JSON序列化策略。使用代码生成的手动解析和自动序列化。

运行时间reflection在颤振中被禁用,导致我们不能有这样的库GSON,Jackson或者Moshi

查看包含两种策略的完整指南here

对于手动解析,不要忘记查看这个在线工具,为模型类自动生成样板:https://app.quicktype.io/

数据持久性

有时,我们需要将数据保存在本地内存中,以便在需要时可以快速使用。

1.如果有相对少量的数据要存储在键值对中。考虑使用shared-preferences。这里有一个detailed guide来实现同样的效果。

2.您还可以在磁盘上读写文件:https://flutter.dev/docs/cookbook/persistence/reading-writing-files

3.如果一个应用程序需要保存大量数据,并且还需要查询它们。建议使用SQLite database

颤振应用程序可以使用SQLite数据库通过sqflite酒馆:https://flutter.dev/docs/cookbook/persistence/sqlite

要获得简单易用的反应式持久性,请查看下面的文章。Moor是sqflite的包装。

依赖性管理

我们在应用中使用了很多酒吧。这是一种很好的方式,可以在不同的应用程序间集体工作和共享代码,而不必从头开始开发一切。

您可以在这里找到所有有用的软件包:https://pub.dev/

有了多家酒吧,你可能会面临版本冲突等问题。您可以在这里找到使用酒吧时要遵循的所有最佳实践:https://flutter.dev/docs/development/packages-and-plugins/using-packages

有了这一切,你现在已经完成了旋舞食谱!:)国家管理的艺术

介绍

在一个典型的应用程序中,一个常见的用例是在点甲所做的改变反映了点乙的一些改变。这就是所谓的状态管理。也可以通过下图理解。

国家管理

颤振有多种方法可以有效地管理应用程序的状态。根据项目规模,我们可以决定合适的技术。在这里,我们将讨论几种可能的国家管理技术:

1.setState

https://flutter.dev/docs/development/ui/interactive

https://medium.com/@agungsurya/basic-state-management-in-google-flutter-6ee73608f96d

2.继承的小部件

查看以下视频,了解什么是继承的小部件。

另外,请在此查看完整的文章列表:https://flutter.dev/docs/development/data-and-backend/state-mgmt/options

纪念Theme.of(context);Navigator.of(context); 你之前用过吗?这是使用相同的继承小部件概念来访问小部件树中的数据。

3.提供商包

provider是依赖注入和状态管理的混合,用小部件来构建小部件。供应商的官方文件太好了,无法深入理解:https://pub.dev/documentation/provider/latest/

4.集团模式

BLoC是一个简单、轻量级、高度可测试、可预测的Dart状态管理库:https://bloclibrary.dev/

我还发现了这个很好的解释BLoC模式的视频系列accompanying article series)。

行业中还有其他流行的国家管理技术,如ReduxMobx

测试

当应用程序增长时,很难测试每一个特性。在这种情况下,自动化测试是必由之路。这有助于确保在我们发布它之前,该应用程序的性能符合预期。所以,我们不会在这种情况下失败;)。

自动化测试分为三类

  1. 单元测试测试单个函数、方法或类。
  2. 小部件测试(在其他用户界面框架中称为组件测试)测试单个小部件。
  3. 集成测试测试完整的应用程序或应用程序的大部分。

请点击此处查看颤振测试的介绍:https://flutter.dev/docs/testing

单元测试

的目标unit testing是测试具有存根/模拟依赖关系的特定代码单元。验证代码在不同场景中是否如预期那样工作。单元测试非常快,不需要实际的设备来执行。

在进行单元测试时,任何依赖类都应该是可注入的,这样我们就可以注入一个依赖的模拟或假实现,并验证一切是否如预期的那样工作。旋舞有一个mockito有助于创建模拟或假实现的框架。

小部件测试

小部件测试是一种用户界面测试技术。小部件测试的目标是测试特定的小部件用户界面是否像预期的那样,并且是交互式的。小部件测试不需要物理设备。我们也可以测试小部件的属性,比如颜色、大小、字体系列等等。

我们还可以执行用户事件,如点击、手势、输入文本等。请在此查看更多详情:https://flutter.dev/docs/cookbook/testing/widget/introduction

集成测试

集成测试成对进行。这里的目标是测试多个单元如何协同工作。集成测试发生在真实的设备或仿真器上。我们可以触发一系列用户交互事件,并期望用户界面呈现或单元代码被正确执行。

https://flutter.dev/docs/cookbook/testing/integration/introduction

再次,检查这个视频系列的详细实施真正的应用与TDD。

行为驱动的开发

当涉众有很强的技术技能时,TDD或单元测试会有帮助。BDD是从最终用户的角度来写一个测试用例。这是用自然英语写的。

测试用例可以用以下格式编写:
给定:场景开始时的初始上下文,在一个或多个子句中;
何时:触发场景的事件;
然后:一个或多个子句中的预期结果。

在内部,行为测试用例可以是单元测试、小部件测试或两者的组合。
BDD有助于从最终用户的角度理解软件功能,并成为一种功能文档。

颤振有助于我们编写行为测试用例。

-

本指南涵盖了所有你需要了解的基础知识,以便开始使用和开发你的应用程序!我希望这能帮助你踏上飞翔的旅程。


进一步阅读