Building a Flutter App for Outdoor IoT Sensor Management

Take the Queen Elizabeth Olympics Park (QEOP) as a Pilot Implementation

Vivian Ku
3 min readJul 16, 2022

QEOP IoT App is my individual project for CASA0015 — Mobile System and Interaction, one of the courses in MSc Connected Environments from the Centre for Advanced Spatial Analysis (CASA), The Bartlett, UCL. My experience has positioned me at the intersection of the IoT solution, cloud technology and business analytics and my aim is to apply my specialist knowledge to the digital twin solutions in the smart city industry.

To find the setup requirements and the step-by-step walkthrough, please visit my Github repository:

VivianKuKu/CASA0015_Mobile-System_QEOP-IoT: QEOP IoT app built by Flutter helps users to manage their outdoor IoT sensors. (github.com)

| Introduction

QEOP IoT app helps the IoT sensor management team maintain hundreds of outdoor sensors by demonstrating the location of each sensor, connecting to the real-time sensor data, and allowing users to record any changes made to the sensors all in one shared platform.

The application is built upon Flutter which is an open-source UI software development kit (SDK) created by Google. It is widely used to develop cross-platform applications for Android, iOS, websites etc. By coding in Dart, an open-source programming language for developing the Flutter app, the app can be built upon any operating system and create a consistent user app experience for various mobile devices.

| Demo

| Inspired by current issues

Currently, IoT field managers use multiple digital notebooks to record information but only allow themselves to access it, making it hard to share specific information with other stakeholders. Besides, records lack unified formats and a shared platform for the long-term use. Last, live data is presented on different websites or MQTT brokers, resulting in more hassles while checking data on-site.

Left: MQTT broker; Right: Google Maps for IoT sensors at QEOP

| Benefit

| Wireframe Design

| Data Flow

Current Structure
Future Structure

| Functions

  • Map page: Find the location of each device and make sure the device ID users are working with.
  • Data page: Check the real-time data feed connecting to the MQTT broker without the hassle in browsing several web pages via computers.
  • Create page: Add new logs to record the maintenance, changes, or tests that users have made for the specific sensors. Any detail regarding project ID, device ID, date, time, description, and attachment can be uploaded here.
  • Log page: Display the created logs chronically.
  • Profile page: Log in and out and manage the authentication of the app’s functions.

| Packages/Dependencies

flutter:
sdk: flutter
mqtt_client:
dropdown_button2: ^1.4.0
datetime_picker_formfield: ^2.0.0
intl: ^0.17.0
image_picker: ^0.8.5
provider: ^6.0.2
custom_navigator: ^0.3.0
google_maps_flutter: ^2.1.5
path: ^1.8.0
path_provider: ^2.0.10

--

--

Vivian Ku

科技轉型顧問@英國倫敦,關注解決都市議題之新創公司、商業模式與未來城市產業趨勢,寫作是為了保持學習的節奏。文章分類: Smart City | Growth Mindset | Entrepreneurship | Reading. Link: linktr.ee/vivianku.growth