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

二. 演示

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

  • 基本上，应用程序提供通过用户的电子邮件和密码进行登录。通过 Google 和 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