Seat Picker UI Application – Flutter Intern Assignment

目录

• 描述
• 屏幕录制
• 屏幕截图
• 功能
• 技术栈
• 入门
• 用法
• 响应式设计
• 状态管理

描述

欢迎来到 Seat Picker UI Application，这是一个基于 Flutter 的应用程序，是为 CRUV 的 Flutter Intern 职位开发的技术作业。该应用程序旨在提供一个用户友好的界面，用于在火车车厢中选择座位，并在确认页面显示所选座位。

该应用程序使用 provider 包进行状态管理，确保了处理应用程序状态的高效且可扩展的方法。通过 flutter_screenutil 实现的响应式设计，该应用程序可以无缝地适应不同的屏幕尺寸和方向。

屏幕录制

屏幕截图

功能

• 座位选择页面，具有直观的用户界面，用于在火车车厢中选择座位。
• 搜索功能允许用户通过在搜索栏中键入座位号来查找所需的座位。
• 确认页面显示所选座位以供审查。
• 浅色和深色主题选项，以提供个性化的用户体验。
• 用户友好的字体，以增强可读性。

技术栈

Seat Picker UI Application 使用以下技术和包构建

• Flutter 框架
• provider 包用于状态管理
• flutter_screenutil 用于响应式设计

入门

要在本地计算机上运行 Seat Picker UI Application，请按照以下步骤操作

• 确保您已安装 Flutter。如果没有，请按照 Flutter 文档中的说明安装 Flutter。
• 将此存储库克隆到您的本地计算机。
• 在您喜欢的 IDE 或编辑器中打开项目。
• 运行 flutter pub get 以安装所需的依赖项。
• 连接设备或启动模拟器。
• 运行 flutter run 以启动应用程序。

用法

• 在座位选择页面，您将看到一列火车车厢以及可用座位。
• 点击您想选择的座位。所选座位将被高亮显示。
• 使用搜索栏通过输入座位号来查找特定座位。
• 选择好所需座位后，导航到确认页面。
• 确认页面将显示您选择的座位以供审查。

响应式设计

该应用程序的设计考虑了响应性。得益于 flutter_screenutil，UI 元素将自动适应不同的屏幕尺寸，从而在各种设备上确保一致且具有视觉吸引力的体验。

状态管理

Seat Picker UI Application 中的状态管理使用 provider 包高效处理。这允许应用程序状态的无缝更新，确保流畅且响应迅速的用户体验。

GitHub

查看 Github