跳到主要内容

概述

Flutter 和 Google 新闻倡议 共同赞助开发了一个新闻应用程序模板。该项目的目标是帮助新闻出版商轻松构建移动应用程序,以便让所有人都能获取可靠的信息。

此模板旨在通过为开发者提供核心组件和功能的先机,从而显著减少典型新闻应用程序的开发时间

Flutter 新闻工具包

  • 包含使用 Flutter 和 Firebase 构建的常见新闻应用程序 UI 工作流程和核心功能
  • 基于 Google 新闻倡议研究,实现了新闻应用程序的最佳实践
  • 允许出版商通过广告和订阅服务立即获利

身份验证、通知、分析和广告等常用服务已使用 FirebaseGoogle 移动广告实现。开发者可以自由替换这些服务,并且可以在 pub.dev 上找到公开可用的软件包。

如果你是 Flutter 的新手,我们建议你首先熟悉该框架,方法是查看入门指南教程代码实验室,然后再使用此模板。

注意

根据你计划为项目创建的风格数量,设置时间可能会有所不同。 例如,你可以在不到 10 分钟的时间内完成一种风格的端到端设置。 对于其他风格,此设置时间预计会增加。 请查看 flutter.dev/news 获取其他信息和视频教程。

入门

先决条件

Dart

为了使用新闻模板生成项目,你必须在你的计算机上安装 Dart SDK

信息

需要 Dart ">=3.5.0 <4.0.0"

Mason

此外,请确保你已安装最新版本的 mason_cli

dart pub global activate mason_cli
信息

Mason 是一个命令行工具,允许你根据你的规范生成自定义代码库。

你将使用 mason 从 Flutter 新闻模板生成你的自定义新闻应用程序。

Dart Frog

最后,请确保你已安装最新版本的 dart_frog_cli

dart pub global activate dart_frog_cli
信息

Dart Frog 是一个快速、极简的 Dart 后端框架。 自 v1.1.0 起,它已稳定。

你将使用 Dart Frog 作为前端的后端 (BFF),这允许你将现有的后端连接到 Flutter 新闻模板前端。 Dart Frog 降低了所有出版商的入门门槛,无论他们现有的后端如何,并使你的应用程序更快地推向市场,而无需客户端修改。

生成你的项目

要使用 Mason 生成你的应用程序,请按照以下步骤操作

注意

从 Flutter 新闻模板生成的项目将使用最新稳定版本的 Flutter。

安装 Flutter 新闻模板

使用 mason add 命令在你的计算机上全局安装 Flutter 新闻模板

信息

你只需要安装一次 flutter_news_template。 安装后,你可以从该模板生成多个项目。

你可以使用 mason list --global 命令验证是否已安装 flutter_news_template

mason add -g flutter_news_template

生成应用程序

使用 mason make 命令从 Flutter 新闻模板生成你的新应用程序

mason make flutter_news_template
信息

运行 mason make 将生成 900 多个文件,这些文件将在控制台中列出。

你可能需要增加控制台回滚缓冲区大小才能查看控制台中列出的所有文件。

模板配置

系统会提示你几个问题。 请准备好提供以下信息以生成你的项目

# The name of your application as displayed on the device for end users.
? What is the user-facing application name? (Flutter News Template)

# The application identifier also know as the bundle identifier on iOS.
? What is the application bundle identifier? (com.flutter.news.template)

# A list of GitHub usernames who will be code owners on the repository.
# See https://githubdocs.cn/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-code-owners
? Who are the code owners? (separated by spaces) (@githubUser)

# Select all flavors that you want the generated application to include.
# We recommend having at least development and production flavors.
# For more information see https://docs.flutterdart.cn/deployment/flavors
? What flavors do you want your application to include?
❯ ◉ development
◯ integration
◯ staging
◉ production

回答完上述问题后,将生成你的自定义新闻应用程序。 你现在可以本地运行该应用程序了!

配置 Firebase

注意

在你可以运行生成的应用程序之前,必须配置 Firebase。 请按照Firebase 设置部分中指定的说明进行操作。

配置或删除广告

信息

你的项目包含广告的示例配置,以便你可以通过最少的设置运行生成的应用程序。 你需要执行其他步骤来配置或删除广告

运行 API 服务器

在运行 Flutter 应用程序之前,请在本地运行 API 服务器。 将目录更改到新生成的项目的 api 目录,然后启动开发服务器

dart_frog dev

运行 Flutter 应用程序

我们建议直接从 VS CodeAndroid Studio 运行项目。

信息

你也可以使用以下命令从根项目目录直接从命令行运行项目

flutter run \
--flavor development \
--target lib/main/main_development.dart \
--dart-define FLAVOR_DEEP_LINK_DOMAIN=<YOUR-DEEP-LINK-DOMAIN> \
--dart-define FLAVOR_DEEP_LINK_PATH=<YOUR-DEEP-LINK-PATH> \
--dart-define TWITTER_API_KEY=<YOUR-TWITTER-API-KEY> \
--dart-define TWITTER_API_SECRET=<YOUR-TWITTER-API-SECRET> \
--dart-define TWITTER_REDIRECT_URI=<YOUR-TWITTER-REDIRECT-URI>

恭喜 🎉

你已生成并运行了你的自定义新闻应用程序! 请转到项目配置了解后续步骤。

贡献

我们欢迎来自 Flutter 社区的贡献。 请查看我们的 wiki 上的 贡献给 Flutter 文档和 贡献者访问页面,以开始参与。

打开问题

如果你遇到任何错误或对此工具包有增强建议,请在主要的 flutter/flutter 问题跟踪器中打开一个问题。 问题应遵循问题卫生指南,并将由 Flutter 团队使用适当的标签和优先级进行分类