介绍
在本文中,我们将构建一个Movies应用程序。 用户打开它后,该应用程序将显示电影院中即将上映的电影列表。 用户还可以在同一屏幕上按标题搜索电影,如下所示:
如果他们点击其中一部电影,则该应用将显示第二个屏幕,该屏幕是电影的更详细视图,具有较大的图像和概述:
为了检索数据,该应用程序将使用一个开放的Web服务,即电影数据库API。
连接到Web服务并使用HTTP检索数据
很少有移动应用程序完全独立于外部数据:想想您用于天气预报,听音乐,阅读书籍,新闻或电子邮件的应用程序。 它们都有一个共同点:它们依赖于从外部来源获取的数据。 从移动(或任何客户端)应用程序获取数据的最常见来源称为Web服务或Web API。
发生的情况是,客户端应用程序连接到Web服务,发出获取数据的请求,如果请求是合法的,则Web服务通过将数据发送到该应用程序进行响应,然后该应用程序将解析数据以了解其功能。 这种方法的优势在于,开发人员只需要创建和维护一个数据源,即可拥有所需数量的客户端。 实际上,这种模式(客户端/服务器)并不是什么新鲜事物,但在设计应用程序时极为常见。
在下面,您可以看到显示此模式的图。 在中心,您有一个远程服务器,它是数据源,它周围是连接到服务器以检索数据的客户端,例如您的移动应用程序:
Web服务通常以两种格式公开数据:JSON或XML。 它们都是文本格式,几乎可以表示相同类型的数据,但是由于JSON更为紧凑,因此使用Web服务时,您可能会经常发现该格式。
在以下屏幕截图中,您可以看到每种格式的示例:
在这两种格式中,您都可以看到电影的示例,其中包括标题,电影的制作年份,类型和演员。 我们不需要深入研究这些格式; 请注意,两种格式都可以表达复杂的数据,在Flutter中,您可以轻松地检索和解析JSON和XML。 我们将在本章中使用的服务提供JSON。
特别是,我们将使用电影数据库API(https://www.themoviedb.org)。 这是一个由社区构建的数据库,其中包含大量数据,可提供多种语言的电影和电视信息。
首次连接数据库之前,您需要获取一个API密钥。 您可以通过在https://www.themoviedb.org/上创建一个帐户,然后单击帐户页面左侧栏中的API链接来获取API密钥。 这是免费的,但需要有效的电子邮件来激活帐户。 还需要具有API密钥才能遵循本章中的示例。
创建应用程序并使用HTTP库连接到API
要做的第一件事是打开pubspec.yaml文件,并向HTTP库添加一个依赖关系,我们将使用该依赖关系进行HTTP请求。 请通过https://pub.dev/packages/http查看最新的可用版本。 在flutter依赖项下添加http库,如下所示:
dependencies:
flutter:
sdk: flutter
http: ^0.12.0+4
然后,我们创建一个名为http_helper.dart的新文件,该文件将用于创建用于连接到Web服务的设置和方法。 在新文件中,让我们导入HTTP库:
import 'package:http/http.dart' as http;
使用as http命令,我们给库命名,因此,我们将通过http名称使用HTTP库的所有函数和类。
然后,我们创建一个新类,我们将其称为HttpHelper:
class HttpHelper {}
下一步是创建地址URL以连接到服务。 这将需要一些字符串,我们将根据需要将其连接起来以从服务中检索数据。 在HttpHelper类的顶部添加以下声明:
final String urlKey = 'api_key=YOUR API KEY HERE';
final String urlBase = 'https://api.themoviedb.org/3/movie';
final String urlUpcoming = '/upcoming?';
final String urlLanguage = '&language=en-US';
为了更轻松地检索这些字符串的值,它们都以url前缀开头。 第一个字符串urlKey包含值api_key =和您从电影数据库服务获得的API密钥。 urlBase字符串是我们将要使用的每个地址的开头。 urlUpcoming是特定于即将上映电影的URL的一部分。 最后,urlLanguage包含一个可选参数,该参数允许您指定要用于查询结果的语言
现在,我们准备编写此类的第一个方法,该方法将用于检索20部即将上映的电影的列表:
Future<String> getUpcoming() async { }
您可能会在这里注意到一个不熟悉的语法。 getUpcoming()函数返回一个future并被签名为异步。 这两个元素都与异步编程有关。
让我们从Web服务检索一些数据:
在getUpcoming方法中,让我们添加一个字符串来创建将在连接期间使用的URL:
final String upcoming = urlBase + urlUpcoming + urlKey +urlLanguage;
接下来,让我们使用HTTP库来创建到我们已建立的URL的连接:
http.Response result = await http.get(upcoming);
http类的get方法返回一个包含Response的Future。 http.Response类包含从成功的HTTP调用接收到的数据。
await关键字仅在标记为异步的函数中起作用,它等待Future完成。 在完成这一行之前,它不会转到线程的下一行,其行为类似于同步代码,但是请记住,这发生在执行的第二行上,因此不会停止UI线程。
现在,我们如何阅读响应? 让我们编写以下代码:
if (result.statusCode == HttpStatus.ok) {
String responseBody = result.body;
return responseBody;
}
else {
return null;
}
HttpStatus类需要dart:io库。 在http_helper.dart文件的顶部,添加所需的导入:
import 'dart:io';
响应具有statusCode和body属性。 状态代码可以表示成功的响应,它是HttpStatus.ok的代码200或错误。 您可能熟悉错误404; 在Dart中,您只需使用HttpStatus.notFound来表达它。
在前面的代码中,如果响应具有有效的状态码,我们将读取响应的主体,该主体是一个字符串,其中包含通过http.get方法检索的所有数据,并将其返回给调用方。
总结起来,我们现在有了一个异步函数,该函数发出一个HTTP请求并返回一个包含字符串的Future。 现在我们需要从main方法调用此函数,并将结果显示给用户。 接下来,让我们开始。
解析JSON数据并将其转换为模型对象
添加模型类
添加列表数据显示
显示尾随图标
显示详细信息屏幕并传递数据
添加搜索功能
详情参阅 - 亚图跨际