? 使用 BloC 在 Flutter 中克隆 Netflix UI

Backdrop

该项目使用 BloC 包来管理状态，使用 GoRouter 进行导航。它使用很棒的 TMDB API 来获取所需的电视节目和电影数据。

该项目的主要目的是演示 BloC 和 GoRouter 的组合使用，但更重要的是展示 Flutter 中 Slivers 的用法。它严重依赖 Slivers，例如 CustomScrollView、SliverList、GridView、SliverAppBar 甚至 SliverPersistentHeader。它还有一个由 GoRouter 的 ShellRoute 精心实现的底部导航栏。除此之外，它还使用 Hero Widgets 来在从主页到电视节目移动时实现一个简单的微小过渡动画，并使用 CustomPainter 来复制个人资料中的笑脸。

它包含各种屏幕，如个人资料选择、主页、新片上映和热门、电影和电视节目详情页。

除此之外，该项目还实现了自定义应用程序图标和启动画面，在 Android 上，它使用新的 Android 12 API 来显示启动画面。

注意：这个项目不是一个完整的 Netflix UI 克隆，但我认为它比互联网上其他的克隆“更完整”，尽管它们各自也很棒！

下载

对于那些想快速浏览该应用程序的人，您可以从 Releases 下载并安装 Android 设备或模拟器上的 apk。

运行

  1. 获取软件包
flutter pub get
  1. 从 TMDB 获取 API 密钥，并在 lib/api/api.dart 中替换它
final apiKey = 'INSERT_YOUR_API_KEY_HERE';
  1. 运行应用 (Run App)
flutter run --release

链接

在 Flutter 中使用 BloC、GoRouter 和 TMDB 克隆 Netflix – Medium

TMDB 网站

TMDB API

鸣谢

The Movie DB Flutter Netflix

许可证

flutter_netflix 已获得 MIT 许可证

GitHub

查看 Github