Repository Banner

Netflix 应用 UI 克隆

Netflix 应用 UI 克隆仓库是一个复制了流行流媒体平台 Netflix 用户界面的项目。该仓库为有兴趣了解和重现使用 Flutter 构建的视觉吸引人且功能丰富的 Netflix 界面的开发者提供了全面的资源。

该克隆利用 TMDB API 的数据来获取和显示电影和电视节目信息，确保了最新且动态的用户体验。该项目使用 Flutter（一种多功能且跨平台的框架）构建，展示了 Flutter 在创建视觉效果惊艳且响应迅速的用户界面方面的强大功能和灵活性。

通过探索 Netflix UI 克隆仓库，开发者可以深入了解如何在真实应用程序的上下文中集成外部 API、UI 设计模式、状态管理等。它提供了一个实践机会，可以在构建 Netflix 界面的高保真克隆的同时，学习和练习 Flutter 开发。

请注意，此仓库仅供教育和个人使用，与 Netflix 或 TMDB 没有任何关联或认可。

技术栈

  • ? Flutter：一个强大而灵活的框架，可跨多个平台构建美观且高性能的用户界面。
  • ? Dart：与 Flutter 结合使用，用于创建 Netflix UI 克隆的逻辑和功能的编程语言。
  • ? Python：一种用于后端开发的通用编程语言。
  • ? Flask：Python 中一个轻量级的 Web 框架，用于创建 API 端点和处理请求。
  • ? TMDB API：用于电影和电视节目信息的主要数据源。
  • ? 自定义 Python API：一个用 Python 构建的自定义 API，它组合和处理 TMDB API 的结果，提供了 TMDB 不直接提供的额外功能。
  • ?️ Git：用于跟踪更改和与他人协作的版本控制系统。
  • ? GitHub：用于管理和共享仓库的托管平台。

屏幕截图

功能

浏览电影和电视节目：探索各种平台上提供的广泛的电影和电视节目。查看标题、概述、评分、发布日期和海报等详细信息。

搜索功能：使用关键字搜索特定的电影和电视节目。获取匹配标题和海报的即时搜索结果。

类别筛选：按热门、评分最高、趋势等类别筛选电影和电视节目。根据不同类型发现新内容。

播放器集成：通过内置视频播放器享受无缝的观看体验。直接在应用内播放即将上映的热门电影的预告片或摘要。

即将上映的电影：获取包含发布日期、概述和海报的即将上映的电影列表。观看即将上映的电影的预告片或摘要。

热门电影和电视节目：发现最新的热门电影和电视节目。徽标会根据从 TMDB API 收到的数据动态更改。播放热门电影的预告片或摘要。

全球排名前 10 的电视节目：访问全球排名前 10 的电视节目精选列表。查看标题、概述、评分和海报等详细信息。

更多功能即将推出 ⚡

入门

先决条件

  • Flutter SDK：确保您的机器上已安装 Flutter。您可以从官方 Flutter 网站下载和安装 Flutter。
  • Flutter IDE：为 Flutter 开发选择一个 IDE，例如 Android Studio、Visual Studio Code 或您选择的任何其他 IDE。在您选择的 IDE 中安装 Flutter 开发所需的插件/扩展。
  • TMDB API 密钥：从 TMDB 网站创建您自己的 API 密钥。API 密钥是获取电影和电视节目数据所必需的。请按照以下步骤生成您的 TMDB API 密钥。

生成 TMDB API 密钥

  1. 访问 TMDB 网站 https://www.themoviedb.org/，如果您还没有账户，请创建一个账户。

  2. 登录后，导航到您的账户设置。

  3. 在账户设置中，选择“API”部分。

  4. 点击“请求 API 密钥”按钮。

  5. 提供必要的信息并按照说明生成您的 API 密钥。

  6. 复制生成的 API 密钥。

安装

  1. 使用以下命令将仓库克隆到您的本地机器
git clone https://github.com/AkshayShineKrishna/Netflix_App_UI_Clone.git

  1. 在您喜欢的 Flutter IDE 中打开项目。

  2. 通过在项目根目录中运行以下命令来安装所需的依赖项

flutter pub get

配置

  1. 打开您喜欢的 Flutter IDE 并导航到项目目录。

  2. 在项目目录中，在 lib\Infrastructure 文件夹下创建一个名为 api_key.dart 的新文件。

  3. 打开 api_constants.dart 文件并声明一个名为 apiKey 的变量

const String apiKey = 'YOUR_API_KEY';

  1. 将“YOUR_API_KEY”替换为您实际的 TMDB API 密钥。

  2. 如果需要，请更新项目文件（lib\Domain\core\api_endpoints.dart）中的导入语句，以包含新创建的 api_key.dart 文件。

  3. 保存 api_constants.dart 文件。

运行应用

  1. 将您的 Android 或 iOS 设备连接到您的开发计算机，或使用模拟器/仿真器。

  2. 通过在项目根目录中运行以下命令来确保您的设备或模拟器已被识别

flutter devices
  1. 一旦您的设备被识别，请使用以下命令运行应用程序
flutter run

此命令将在您连接的设备或模拟器上构建并运行应用程序。

文件夹结构

  1. Application：它被划分为每个屏幕的子文件夹（downloads、home、hot_and_new、search），每个子文件夹包含相应的 bloc 文件（*_bloc.dart）、(*_state.dart) 和事件文件 (*_events.dart)。

  2. Core：包含应用程序的基本核心组件和配置。它包括

  • Colors：包含 colors.dart 文件，该文件定义了整个应用中使用的常量主题颜色。
  • constants.dart：存储常量值，例如间距和固定框尺寸。
  • di：包含 injectable.dart 文件，该文件设置应用程序的依赖项注入配置。
  • strings.dart：包含 API 调用和网络图像的基本 URL。
  1. Domain：代表应用程序的域层，并根据每个屏幕进行组织。它包含每个屏幕（downloads、home、hot_and_new、search）的子文件夹，每个屏幕文件夹进一步包含
  • model：包含该屏幕特定的数据模型。
  • services.dart：包含与该屏幕相关的服务，例如 API 请求或数据处理。
  1. Infrastructure：包含每个屏幕的实现细节和存储库。它包括
  • api_key.dart：用户必须创建的文件（如说明中所述），用于存储其 TMDB API 密钥。
  • 每个屏幕（downloads、home、hot_and_new、search）的子文件夹，其中包含所使用的服务存储库的实现。
  1. Presentation：负责应用程序的表示层。它包括每个屏幕（downloads、home、hot_and_new、search）的子文件夹。每个屏幕文件夹包含
  • widgets：包含该屏幕使用的特定小部件。
  • {screen_name}_screen.dart：每个屏幕的主要 Dart 文件，定义了 UI 并处理用户交互。
  1. main.dart：Flutter 应用程序的入口点。

开发状态和限制

? 开发中：此项目仍在开发中，适合初学者探索 Flutter 和 UI 设计原则。

? 有限设备测试：该应用程序已在有限数量的物理设备上进行了测试，因此在不同设备上的性能和兼容性可能存在差异。

? 自定义 API 限制：项目中使用的当前自定义 API 支持的用户数量有限。如果您遇到任何与数据检索或连接相关的问题，可能是由于自定义 API 的限制。

? 屏幕差异：由于设备屏幕尺寸和纵横比的差异，某些设备上可能出现像素溢出或布局问题。

? 主动解决问题：这些问题正在积极解决中，欢迎社区的贡献来帮助改善应用程序的响应性和兼容性。

? Beta 分支实验：此仓库的 beta 分支是开发和测试实验性功能和增强的地方。它可能包含不稳定的代码和尚未合并到主分支的功能。欢迎探索 beta 分支并提供反馈或贡献其开发。

贡献

? 欢迎贡献！如果您发现任何问题或有改进建议，请随时在 GitHub 仓库中创建拉取请求或打开一个 issue。

? 在提交您的贡献之前，请确保查看并遵循 贡献指南。

感谢您对改进项目的兴趣！?

致谢

Netflix 应用 UI 克隆项目灵感来自原始的 Netflix 界面。我们感谢 Netflix 和 TMDB 提供的数据和设计灵感，使本项目得以实现。

特别感谢 Flutter 社区在 Flutter 框架和生态系统方面的持续支持、指导和贡献。

如果您觉得该仓库有用，请不要忘记 ⭐ star 它！

对于关于 Netflix 应用 UI 克隆项目的任何疑问、问题或反馈，请联系 ?电子邮件 Instagram

GitHub

查看 Github