一个完整的 Flutter 功能应用 – FindSeat (BLoC + Json API + 单元测试 + Firebase Auth)

Banner

一、简介

我是一名Android开发者，在越南一家软件公司工作。我拥有两种项目经验：外包项目和产品项目。我决定学习Flutter，因为我相信它具有美好的未来。作为一名经验丰富的开发者，我关心清晰的架构、测试、性能和可维护性，因此我一直在寻找一个完整的应用程序示例。不幸的是，社区现在充斥着诸如速度编码、UI挑战等项目，它们只是真实世界应用的一小部分。事实上，大多数项目并没有那么华丽的UI。这就是为什么我决定自己构建这个项目，现在分享给社区，我希望你能从中获得一些东西，然后应用到你的工作中。

项目的第一版（v1.0）只有UI+简单的逻辑。在这个v2.0版本中，我将Bloc模式应用于项目，并为它进行了单元测试。我还为该应用构建了一个简单的Mock API，它只是一个上传到我的私人托管上的静态json文件。我希望我能有时间通过SQLite缓存本地数据，但我还没有，所以希望下一版本会尽快推出。

查看视频演示

二、展示

2.1. 主页

在主页上，它只是简单地加载数据然后显示到UI。你可以尝试：

2.1.1. 页面：主页1

Home_1

  • (0) 是关于我的？
  • (1) 是用于显示横幅的轮播滑块，它每1秒自动播放一次。你可以向左或向右滑动以查看上一个/下一个项目
  • (2) 是座位类别列表。如果你点击一个类别，应用程序将打开“所有演出”屏幕。这是一个水平列表，所以你可以滑动以获取更多项目
  • (3) 是推荐座位。点击项目，应用程序将打开“演出详情”屏幕
2.1.2. 页面：主页2

Home_2

  • (4) 是附近的影院。这里没有什么特别的可以尝试的，它只是一个简单的地图，带有高亮的影院位置
  • (5) (6) 是每个类别的演出列表。与推荐座位相同，你可以点击项目打开“演出详情”屏幕

2.2. 所有演出

2.2.1. 页面：所有演出1

AllShows_1

  • (1) 点击打开搜索字段。基本支持按名称搜索
  • (2) 点击打开排序选项。基本支持按评分和名称排序
  • (3) 有3个标签：正在上映、即将上映和独家。你可以向左/向右滑动以查看每个标签的内容
  • (4) 以网格视图显示演出列表
2.2.2. 页面：所有演出2

AllShows_2

  • 排序选项对话框
2.2.3. 页面：所有演出3

AllShows_3

  • 应用程序将在停止输入400毫秒后执行搜索，这实际上是去抖技术。尝试点击项目，应用程序将打开“演出详情”屏幕

2.3. 演出信息

2.3.1. 页面：演出信息1

ShowInfo_1

  • (1) 是来自Youtube链接的演出预告片
  • (2) 演出描述
  • (3) 是优惠部分。这不是静态内容，可以在Mock API中更改
2.3.2. 页面：演出信息2

ShowInfo_2

  • (4) 是用户评论部分。目前尚不支持写评论功能
  • (5) 是演员阵容部分。这是一个水平列表视图，你可以滑动以获取更多内容。
  • (6) 点击“预订座位”，应用程序将打开“预订时间段”屏幕

2.4. 预订时间段

2.4.1. 页面：预订时间段1

BookTimeSlot_1

  • (1) 点击打开搜索字段。基本支持按影院名称搜索
  • (2) 带有时间段的影院列表。灰色项目是当前不可用的时间段。
2.4.2. 页面：预订时间段2

BookTimeSlot_2

  • 应用程序将在停止输入400毫秒后执行搜索，这实际上是去抖技术。点击项目时间段，应用程序将打开“预订座位类型”屏幕。

2.5. 预订座位类型

BookSeatType

  • (1) 选择座位数量
  • (2) 选择座位类型

2.6. 预订座位槽

BookSeatSlot

  • (1) 是已预订座位的数量
  • (2) 已预订座位。你可以点击选择，然后再次点击取消选择座位。
  • 验证：例如，在“预订座位类型”屏幕中，你选择了3个座位，类型是Jack，这意味着
    • 你不能选择Queen或King座位
    • 你不能预订超过3个座位

2.7. 付款

2.7.1. 页面：付款1

MakePayment_1

  • 应用程序集成了Stripe SDK，目前用于测试，当你点击任何支付方式（借记卡/UDI/网上银行）时，应用程序只会显示通过输入卡信息到表格进行支付的选项。
2.7.2. 页面：付款2

MakePayment_2

  • 为了测试，请使用以下信息：
    • 卡号：4242 4242 4242 4242
    • 有效期：04/24
    • CVC：424 或 242
2.7.3. 页面：付款3

MakePayment_3

  • 在Stripe验证支付信息后，应用程序将显示你的预订信息。

2.8. 登录

Login

  • 应用程序基本支持用户使用电子邮件和密码登录。谷歌和Facebook登录即将推出。
  • 测试账号：[email protected] / 123456

2.9. 注册

Register

  • 我使用Bloc模式在此表单中进行了验证，你可以参考它来学习如何在Bloc中进行表单验证。

三、Mock API

https://integer.sgp1.digitaloceanspaces.com/findseat

API 用法
/home.json 返回主页数据
/all_shows_by_type.json 返回所有演出页面数据
/booking_time_slot_by_cine.json 返回预订时间段页面数据
/book_seat_slot_by_time_slot.json 返回预订座位槽页面数据

四、插件

插件 用法
retrofit 用于处理RESTful API，生成模型
json_annotation 同上（SAA）
dio SAA
build_runner SAA
flutter_bloc 用于构建应用程序架构
carousel_slider 用于主页的横幅部分
freezed 处理Bloc的状态
equatable SAA
meta SAA
intl 格式化日期时间和其他格式
youtube_player_flutter 显示Youtube链接的预告片
shared_preferences 用于缓存用户会话
flutter_svg 显示SVG图标
google_maps_flutter 显示影院地址
dotted_border 在演出详情页面显示优惠票的虚线边框
shimmer 动画图片占位符
stripe_payment 用于预订功能
firebase_core 用于使用Firebase注册账户和登录
google_sign_in SAA
firebase_auth SAA
test 尝试使用单元测试，大部分情况来自Bloc
bloc_test SAA

五、设计致谢

作者：Dinu Dinesh
设计链接：电影和活动票务预订应用程序

开发环境

flutter doctor -v

[√] Flutter (Channel stable, 2.8.1, on Microsoft Windows [Version 10.0.19043.1586], locale en-US)
    • Flutter version 2.8.1 at C:\src\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 77d935af4d (3 months ago), 2021-12-16 08:37:33 -0800
    • Engine revision 890a5fca2e
    • Dart version 2.15.1

[!] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at C:\Users\ASUS\AppData\Local\Android\sdk
    X cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com.cn/studio/command-line for more details.
    X Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutterdart.cn/docs/get-started/install/windows#android-setup for more details.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

[√] Android Studio (version 3.1)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin version 29.0.1
    • Dart plugin version 173.4700
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1024-b02)

[√] Android Studio (version 3.5)
    • Android Studio at C:\Program Files\Android\android-studio
    • Flutter plugin version 42.1.1
    • Dart plugin version 191.8593
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b03)

[√] Android Studio (version 3.6)
    • Android Studio at C:\Program Files\Android\AS33
    • Flutter plugin version 49.0.1
    • Dart plugin version 192.8052
    • Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b04)

[√] IntelliJ IDEA Community Edition (version 2020.3)
    • IntelliJ at C:\Program Files\JetBrains\IntelliJ IDEA Community Edition 2020.3.1
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart

[√] IntelliJ IDEA Ultimate Edition (version 2021.1)
    • IntelliJ at C:\Program Files\JetBrains\IntelliJ IDEA 2021.1
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart

[√] VS Code (version 1.65.0)
    • VS Code at C:\Users\ASUS\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension can be installed from:
       https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

[√] Connected device (3 available)
    • sdk gphone x86 (mobile) • emulator-5554 • android-x86    • Android 11 (API 30) (emulator)
    • Chrome (web)            • chrome        • web-javascript • Google Chrome 99.0.4844.74
    • Edge (web)              • edge          • web-javascript • Microsoft Edge 98.0.1108.62

! Doctor found issues in 1 category.

运行项目前，请执行以下命令：

  • flutter clean
  • flutter pub get
  • flutter pub run build_runner build 或 flutter pub run build_runner build --delete-conflicting-outputs
  • flutter run （如果需要）

支持

  • 如果你想在下一个版本中获得更新，请给我的仓库点个⭐？
  • 如果你喜欢我的作品并想支持我，请在此处给我买杯咖啡。非常感谢！？

GitHub

查看 Github