ZGS GIS Platform: Flutter Web with an embedded ArcGIS map

Context

Power line and infrastructure construction projects need strong map tools, plus the usual business features: dashboards, HSE incident reports, permit tracking, supplier assignments and document versions. Eight modules in one platform, for German business users.

The big decision: don't rebuild ArcGIS

The app is built with Flutter Web. The client needed ArcGIS, and its main features are in its JavaScript API. There were two options:

1. Wrap ArcGIS in Dart. One language and one build. But we would have to maintain bindings for an API we don't control, and we would always be behind its releases.
2. Embed the real React/ArcGIS build inside the Flutter app. Two build systems and one boundary to manage, but the map is the real ArcGIS product, not a copy of it.

I chose to embed it. The map is the most important part of this product. Being one ArcGIS release behind on a feature the client asked for would be worse than the extra complexity of a boundary that I define and control.

The bridge

The Flutter app and the embedded map talk through a two-way postMessage bridge that carries only two things:

• Login token: the map uses the existing session instead of logging in separately. One login, one user.
• Live map filters: when filters change in the Flutter UI, the map updates without reloading.

Keeping the bridge this small is what makes it easy to maintain. If the bridge starts passing any kind of call, it becomes a distributed system with no schema.

Login and networking

Microsoft Azure AD single sign-on, with a Dio interceptor that refreshes the token automatically. No feature needs its own retry logic for login. A shared REST client turns HTTP errors into typed exceptions in one place.

UI

German and English, light and dark themes, and layouts for four screen sizes. Hosted on Firebase Hosting with Cloud Functions, connected to an API on Azure. The hosting is simple on purpose.

Stack

Flutter Web · Dart · ArcGIS JS API · Azure AD (OAuth 2.0) · Dio · Provider/GetIt/GetX · go_router · fl_chart · Firebase Hosting & Cloud Functions · REST on Azure