宝可梦图鉴

欢迎来到宝可梦图鉴项目!

Screenshot 2022-09-19 at 4 57 26 PM

入门

运行说明

  1. 本项目使用 Flutter 3.0.3 版本,请确保您已安装该版本,或运行 flutter upgrade
  2. 首先运行 flutter pub get,然后运行 flutter run
  3. 由于本项目使用 build_runner 为测试用例生成模拟文件,您需要先运行 flutter pub run build_runner build --delete-conflicting-outputs 才能运行测试用例
  4. 要运行测试用例,请使用 flutter test

设计

您可以通过此链接访问应用程序的设计(https://www.figma.com/file/vP3TT058xIqpOv5zv7cUg9/Pokedex-Assessment?node-id=32%3A83)。

项目亮点

  1. 项目结构采用干净架构
  2. 使用 Riverpod 进行状态管理
  3. 已编写单元测试用例
  4. 使用本地数据库存储离线数据
  5. 处理了无限滚动分页

使用的包

  • 状态管理 – flutter_riverpod: ^2.0.0-dev.9
  • 对象比较 – equatable: ^2.0.3
  • 网络 – http: ^0.13.4
  • 带闪烁效果的加载器 – shimmer: ^2.0.0
  • 用于所有宝可梦的无限滚动 – infinite_scroll_pagination: ^3.2.0
  • 用于在本地存储值 – shared_preferences: ^2.0.15

项目/屏幕流程

  1. 应用程序启动时会显示启动屏幕。

  2. 所有宝可梦屏幕

  • 所有宝可梦都从此 API 获取:https://pokeapi.co。由于 API 返回的宝可梦数量众多,因此使用了分页。
  • 对于宝可梦 #001 -> id Bulbasaur -> name Grass, Poison -> 来自 types 字段
  • 宝可梦的图像使用的是:sprites > other > official-artwork > front_default。
  • 所有宝可梦将在此标签页中列出。
  • 在获取宝可梦时,还有一个进度指示器。
  1. 收藏夹
  • 当用户点击宝可梦详情页上的“标记为收藏”按钮将宝可梦标记为收藏时,它应该在此标签页中显示。
  • 标记为收藏的宝可梦数量应显示在标签页文本附近,如图所示。标记为收藏的宝可梦应持久化,数据可以存储在磁盘上。因此,在标记为收藏宝可梦后,即使应用程序关闭并重新启动,它仍然应该显示在“收藏”标签页下。
  • 由于我们希望始终看到最新(API 返回的)收藏宝可梦的信息,我们将使用本地数据库。
  1. 宝可梦详情页
  • 在实现此页面的应用栏时使用了 SliverAppBar。
  • 用于计算 BMI,使用以下公式:weight / (height^2),不关心任何单位。
  • 用于计算基础属性下的平均功率,使用以下公式:(Hp + Attack + Defense + Special Attack + Special Defense + Speed) / 6
  • “从收藏中移除”按钮会将相关的宝可梦从“收藏”标签页的列表中移除。

GitHub

查看 Github