VisiGas v1 Visual Prototype — For Client Approval
Generated 2026-06-04 from the Flutter app design system · A static, clickable visualization — the real app is coming.

VisiGas Visual Prototype

An interactive preview of the VisiGas mobile app — click through, try the forms, simulate gas usage.

Start the walkthrough

Take a guided tour

A step-by-step popup walks you through a full flow, screen by screen. End it any time.

Demo controls

Switch between the two user types — the app reloads into that mode.

The floating Demo button (top-right of every screen) lets you reset gas, simulate a low level, and trigger notifications on any screen.

dark = pairing mode alt = branch/variant state Active = Active-users only
1

Sign up & onboarding

First launch

From first open to a configured account: register, verify, accept POPIA, and choose user type + mode.

1Splash
Branded launch screen; "Get started" → login.
2Login
Email + password sign-in, with links to register and forgot-password.
3Register
Name, email, +27 phone, password, and the POPIA consent checkbox.
4Verify email
"Check your inbox" confirmation with a resend option.
7User type
Pick Residential / Commercial / Restaurant / Industrial / Other.
8Active / Inactive
Choose full features (Active) or read-only (Inactive).
5Forgot password
Enter email to receive a reset link.
alt · from login
6Privacy policy
Scrollable POPIA template + Information Officer contact (from the consent link).
alt · from register
2

Connect & calibrate the scale

One-time setup

Grant location, find the scale (dark "pairing mode"), then run first-time calibration.

9Location disclosure
POPIA pre-prompt explaining why Bluetooth scanning needs Location (RISK-013).
10Searching
Scanning animation; "hold your phone near the device."
dark
11Scale found
Shows SmartScale_01 + signal strength; tap Connect.
dark
12Connecting
"Syncing…" while the scale links to the account.
dark
14Calibration
5-second hold + LED steps, bottle-size chips (5–48kg), tare entry.
13Device not found
Failure state with Try Again / configure manually.
alt · pairing branch
3

Everyday monitoring

Both user types

The home dashboard (four states), usage history, and the settings hub with its sub-screens.

15Dashboard — safe
Gas bottle at 45%, "Safe Level", current weight, request-reading + actions.
16Dashboard — low
Below 20%: red liquid, "Low Level Alert", order-refill prompt.
state
17Dashboard — critical
~5%: critical red state, urgent order CTA.
state
18Dashboard — offline
Connection-lost banner; shows last known reading (offline mode).
state
19History
Time-range tabs, weight-trend chart, recent readings list.
20Settings (hub)
Account, notifications, privacy, mode, suppliers, about, Save / Disconnect.
4

Settings sub-screens

From Settings

Everything reachable from the Settings hub.

21Reading frequency
1–24h interval picker with the battery-drain warning dialog for <24h.
22Notification method
Email (primary) + optional push / SMS toggles.
23Alert thresholds
Low-gas slider + toggles for <20/10/5%, empty, battery, orders.
24Mode / type change
Change user type or mode; warns on Active→Inactive downgrade.
25Account
Profile details, edit (deferred), log out.
5

Suppliers & replenishment

Active only

Active users link suppliers and order gas. Hidden for Inactive users.

27Supplier list
Linked + pending suppliers with status pills.
26Add supplier
Name / email / phone form; checks the pre-approved network.
28Not on network
"We'll get them on board" message for unlisted suppliers.
alt
29Order confirm
Summary (weight, size, location, contact) before sending to a supplier.
30Order history
Past orders with Sent / Confirmed status.
6

Installation location

Setup / Settings

Where the bottle is installed — used for supplier delivery instructions.

31Wi-Fi location
Permission rationale for Wi-Fi positioning.
32Pin on map
Drag a pin to the exact installation spot.