使用 Flutter 构建新闻应用

您是否喜欢坐在早餐桌旁喝茶或咖啡时阅读早报？好吧，我是那些喜欢在早上第一件事就是阅读新闻以保持更新的人之一。

为什么不构建一个应用程序来为我们自己保持最新的精选新闻？让我们应用我们对 Flutter 的知识来创建我们自己的新闻应用程序。以下是我们将采取的步骤来创建应用程序并提高我们的 Flutter 技能：

1. 1. 演示应用程序介绍

   2. 设置依赖项

   3. 为 Android 和 iOS 配置 WebView

   4. 获取新闻 API 密钥

   5. 编写模型类

   6. 使用 GetX Controller 类获取数据

   7. 创建 NewsCard 小部件

   8. 添加搜索栏小部件

   9. 添加轮播小部件

   10. 添加侧抽屉小部件

   11. 完成我们的主屏幕

请继续阅读以了解我们的最终产品会是什么样子。

演示应用程序介绍

我们正在构建一个在屏幕顶部有一个搜索栏的单屏应用；一个轮播小部件，用于显示来自世界各地的头条新闻；以及当用户从侧边抽屉中选择时基于Country、Category或Channel的新闻列表。

运行应用程序时，头条新闻的默认Country设置为India，默认Category设置为Business。

我们将使用来自NewsAPI.org的 API 密钥。您还可以使用MediaStack和NewsData的 API，因为我们可以在开发人员模式下查询有限数量的新闻文章。新闻 API 每天允许大约 100 个查询。相反，MediaStack 每月允许 500 次查询，而 NewsData 每天允许 200 次查询。您可以随时注册不同的帐户来测试您的应用程序。除了唯一的 API 密钥外，一切都将保持不变。

考虑到这一点，让我们开始构建。

设置依赖项

在您的pubspec.yaml文件中，请添加以下依赖项：

• http: ^0.13.4 — 一个可组合的、基于 Future 的库，用于发出 HTTP 请求。使用这个包，我们将从NewsApi.org查询新闻文章

• webview_flutter：^3.0.4 — 一个 Flutter 插件，在 Android 和 iOS 上提供 WebView 小部件。有了这个包，用户可以阅读整篇新闻文章

• carousel_slider：^4.1.1 — 支持无限滚动和自定义子小部件的轮播滑块小部件。我们正在使用这个包来显示将自动水平滚动的最新标题

• 获取：^4.6.5 — 我们的状态管理解决方案。我已经谈到了使用GetX 作为Flutter 的状态管理解决方案的优势；它快速且易于实现，尤其是在开发人员进行原型设计时

为 Android 和 iOS 配置 WebView

由于我们使用 WebView 包来显示整篇新闻文章，因此我们必须对文件夹内的 Android app/build.gradle文件和 iOS文件进行一些更改。info.plist``Runner

安卓版

您必须将 更改minSdkVersion为至少19. 此外，添加multiDex对 Android 依赖项的支持。请看下面的图片以供参考：

对于 iOS

在该Runner文件夹中，您必须添加此行以支持 Flutter 在 iOS 设备上运行时的嵌入式视图：

<key>io.flutter.embedded_views_preview</key>
   <string>YES</string>

请看下面的图片以供参考：

我们的依赖项是为新闻应用程序设置的。现在，让我们在 NewsApi.org 上注册并获取我们唯一的 API 密钥。

获取新闻 API 密钥

访问 NewsAPI.org 并使用您的电子邮件 ID 和密码进行注册。一旦您注册，它将为您自己生成一个唯一的 API 密钥，我们将使用它来请求新闻文章。将该键保存为 Flutter 项目中的常量。

端点

要使用此 API，我们需要了解端点是什么。端点是 API 允许软件或程序相互通信的不同点。

重要的是要注意端点和 API 不是一回事。端点是 API 的一个组件，而 API 是一组规则，允许两个软件共享资源以相互通信。端点是这些资源的位置，API 使用 URL 来检索请求的响应。

---

超过 20 万开发人员使用 LogRocket 来创造更好的数字体验了解更多 →

---

新闻 API 的主要端点

1. https://newsapi.org/v2/everything？（这会搜索超过 80,000 个不同来源发表的每篇文章）

2. https://newsapi.org/v2/top-headlines？（这会根据国家和类别返回突发新闻头条）

3. 还有一个次要端点，主要返回来自特定发布者（例如：BBC、ABC）的新闻https://newsapi.org/v2/top-headlines/sources？

对于上述端点，我们必须提供用于处理身份验证的 API 密钥。如果 API 密钥没有附加在 URL 的末尾，我们一定会收到一个401 - Unauthorized HTTP error.

所以 URL 看起来像这样：

https://newsapi.org/v2/everything?q=keyword&apiKey=APIKEY

上面的 URL 将返回一个 JSON 响应，如下所示：

{
"status": "ok",
"totalResults": 9364,
-
"articles": [
-
{
-
"source": {
"id": "the-verge",
"name": "The Verge"
},
"author": "Justine Calma",
"title": "Texas heatwave and energy crunch curtails Bitcoin mining",
"description": "Bitcoin miners in Texas powered down to respond to an energy crunch triggered by a punishing heatwave. Energy demand from cryptomining is growing in the state.",
"url": "https://www.theverge.com/2022/7/12/23205066/texas-heat-curtails-bitcoin-mining-energy-demand-electricity-grid",
"urlToImage": "https://cdn.vox-cdn.com/thumbor/sP9sPjh-2PfK76HRsOfHNYNQWAo=/0x285:4048x2404/fit-in/1200x630/cdn.vox-cdn.com/uploads/chorus_asset/file/23761862/1235927096.jpg",
"publishedAt": "2022-07-12T15:50:17Z",
"content": "Miners voluntarily powered down as energy demand and prices spiked \r\nAn aerial view of the Whinstone US Bitcoin mining facility in Rockdale, Texas, on October 9th, 2021. The long sheds at North Ameri... [+3770 chars]"
},

了解上述内容后，我们现在开始编写应用程序，从模型类开始，然后是 GetXController类。

编写模型类

我们有 3 个模型类。

1. ArticleModel

   class ArticleModel {
    ArticleModel(this.source, this.author, this.title, this.description, this.url,
        this.urlToImage, this.publishedAt, this.content);
   ​
    String? author, description, urlToImage, content;
    String title, url, publishedAt;
    SourceModel source;
   ​
    Map<String, dynamic> toJson() {
      return {
        'author': author,
        'description': description,
        'urlToImage': urlToImage,
        'content': content,
        'title': title,
        'url': url,
        'publishedAt': publishedAt,
        'source': source,
      };
    }
   ​
    factory ArticleModel.fromJson(Map<String, dynamic> json) => ArticleModel(
          SourceModel.fromJson(json['source'] as Map<String, dynamic>),
          json['author'],
          json['title'],
          json['description'],
          json['url'],
          json['urlToImage'],
          json['publishedAt'],
          json['content'],
        );
   }

2. NewsModel

   class NewsModel {
    NewsModel(this.status, this.totalResults, this.articles);
   ​
    String status;
    int totalResults;
    List<ArticleModel> articles;
   ​
    Map<String, dynamic> toJson() {
      return {
        'status': status,
        'totalResults': totalResults,
        'articles': articles,
      };
    }
   ​
    factory NewsModel.fromJson(Map<String, dynamic> json) => NewsModel(
          json['status'],
          json['totalResults'],
          (json['articles'] as List<dynamic>)
              .map((e) => ArticleModel.fromJson(e as Map<String, dynamic>))
              .toList(),
        );
   }

3. SourceModel

   class SourceModel {
    SourceModel({this.id = '', required this.name});
   ​
    String? id, name;
   ​
    Map<String, dynamic> toJson(