Flutter实战——一天写出来的跨平台 app(物联网汽车管理平台)

966 阅读3分钟

image.png

Github:github.com/Ashley0324/…

简介

这是我本学期 Mobile system 的课程作业。说一天写出来有点标题党了,第一次查漏补缺在所难免,磕磕绊绊整了半个月。交作业前整理逻辑重新写了一遍,大概在图书馆泡了14个小时完成这个最终版。老手一天写完确实没问题。

因为是基于 IoT的应用,因此加入了MQTT,API部分,前端的小伙伴可以忽略这部分,参考个 UI 就行。 Github 上有从想法到故事板,线框图,最终开发的详细过程。

下面是软件的主要页面:

image.png

设计灵感

出发点是英国这边家庭大部分都有多辆汽车,如果能够用一个软件进行统一管理会方便很多。功能上主要参考了Tesla,另外因为很多权限拿不到就在功能上阉割了很多。主要保留了和汽车定位以及安全相关的内容,毕竟这边因为监控系统不到位,汽车特别容易被偷,还有汽车轮胎被偷也是绝了。

关于 Flutter

作为设计转码选手,这几年下来感觉 Flutter 对新手是最友好的了。Dart 语言简洁易懂,最大的优势应该就是跨平台开发,一步到位真的舒服。但是 Flutter的相关库还是不算多,不够相信未来在轻代码时代会逐步成为主流。

调用数据来源

  • Location: MQTT(Arduino 上的 GPS 模块),真车可以直接调用 API。
  • 天气: MQTT(在实验室用传感器测的数据上传到 MQTT),也可以直接调用 API。
  • 奔驰汽车车况: API有 Sandbox模式,免费给模拟数据,如果是商业用真实数据需要收费,学生党不舍得花钱。

用到的库

  • Flutter_svg 1.0.3: 用来渲染 svg 格式图像
  • Http0.13.4: 建立 http 请求
  • mqtt_client: ^5.5.3: 连 MQTT 来获取数据。也可以通过发送指令控制物联网,这个项目时间太紧了就没有做这部分,但是操作是一样的。
  • cupertino_icons: ^1.0.2: 调用 icon

主要应用

  • Widget tree
  • Text widget
  • Button widget
  • Theme widget
  • Layout widget
  • Navigation
  • GestureDetector widget
  • Communication with MQTT and API 这些都是 Flutter 开发的常用操作,练上一遍就很顺手,再做起来就很快了。

后记

其实在这个作业里,让我觉得收获最大的并不是 Flutter 本身的学习,而是老师跟我讲工作流的问题。因为之前学设计,让我在软件开发时候大部分时间都用在了设计上导致后面时间比较紧张,熬了几次夜。如果能合理安排时间的话肯定用不上,毕竟设计这东西永远都做不完。

另外在开发过程中前期不用考虑太多 UI 因素。可以先把主要功能实现,之后的时间慢慢调整 UI 和 interaction design。不过总体还不算,得到的评价还可以,尤其是界面设计还被夸了。


我是虫二,不一样的程序媛!
努力做程序员里最漂亮的,美女里最会写代码的。
创作不易,还请多多支持。\