flutter_skills_test

Flutter Application to test basic flutter understanding

入门

在开始应用程序之前，先了解一下 Flutter 是什么。

如果您这是您的第一个 Flutter 项目，这里有一些入门资源

有关 Flutter 入门的帮助，请参阅 在线文档，其中提供了教程、示例、移动开发指南和完整的 API 参考。

先决条件

克隆并运行

将此项目克隆到您的本地目录，然后运行 flutter run。

运行应用程序后，您将看到以下两个屏幕。

屏幕 1

屏幕 2

要求

我们将测试您在 Flutter 方面的技能，因此您需要对 屏幕 2 进行修改。

屏幕 2 是一个车辆目录屏幕，用户可以在其中查看车辆的价格和型号。

步骤 1：屏幕设计

  • 通过点击按钮 显示车辆，从 屏幕 1 导航到 屏幕 2

  • 请参考 线框图 以了解屏幕应有的外观

  • 将 屏幕 2 (screens/vehicles.dart) 的 Scaffold Widget 的 body 替换为您自己的实现。

      `body: Center(
    child: Text('No Vehicles Found!!', style: TextStyle(fontSize: 30.0))
  )`

  • 要设置车辆图像，您可以创建一个空的彩色框，或者使用任何图像或图标。

    如果您想使用静态图像，请参考此 参考

步骤 2：静态数据连接

  • 模型类 Vehicle 已为您在 (model/Vehicle.dart) 中创建。

  • 模型类还包含一个预填充的静态列表，其中定义了 4 辆车。您可以使用它作为您的数据。

  • 模型类 Vehicle 中的每个字段都对应于 屏幕 2 的线框图中的一个字段

步骤 3：按钮

  • 在进行第 3 步之前，必须先完成第 1 步。

  • 点击 图标按钮 时，应分别显示下一辆和上一辆车。

  • 点击 编辑按钮 时，您应该提供编辑数据的灵活性。

  • 点击 删除按钮 时，不应显示该车辆。

  • 如果用户删除了所有车辆，他应该看到 **‘未找到车辆！！’**

步骤 4：API 连接（可选）

  • 在进行第 4 步之前，必须先完成第 2 步。

  • 在此步骤中，车辆的数据可以从 API 获取

  • 可以通过 GET 调用从端点 https://myfakeapi.com/api/cars/ 获取数据。此端点返回 1000 辆车的详细信息，但您只需要显示 **前 10 辆**。有关 API 的更多详细信息，请参阅链接 MyFakeAPI

  • 在 (services/vehicle_service.dart) 中实现以下函数。在您想要加载数据时调用该函数。

      `static Future<Vehicle> fetchVehicles() async {
    //Your Code to fetch vehicles
  }`

步骤 5：提交

完成以上步骤后，您可以使用此 参考 生成 .apk 文件。

签名 apk 不是必需的。

同样，在进行以上步骤时，如果您发现现有代码中有需要更改的地方，请随时进行。

GitHub

查看 Github