Bringing a mobile health app experience to the web

The backstory

The goal was simple: build a fast, intuitive, and reliable app that worked across iOS and Android using a single codebase. Flutter didn’t just deliver—it impressed. But as with many digital transformation journeys, the next logical question was, “Can we use the same codebase to create a seamless web experience, too?”. That question kicked off a new phase in the Brillio journey—one filled with challenges, trade-offs, and healthy learning.

Why Flutter was the obvious choice for building the web experience

With users ranging from young adults to senior citizens, UI consistency and performance were key, and Flutter offered the following:

• A single codebase for iOS and Android (and eventually the web)
• A fast development cycle
• Beautiful, natively compiled UI components
• An active open-source ecosystem

The above benefits meant our team had to contend with fewer moving parts. We were given a unique opportunity to deliver rapid value without scaling multiple teams for each platform. However, the journey to building the web experience came with its own set of surprises. It wasn’t a mere copy-paste of the mobile experience into a browser. Instead, it required a new way of thinking encompassing design, performance, and architecture.

Building the web experience for the client with Flutter

1. Navigation patterns: Mobile apps rely on stacked navigation and gestures. Web users expect URLs, back buttons, and deep linking. We had to rethink routing to give us more flexibility and better control over browser history and paths.
2. Layout responsiveness: What looks great on a phone may not translate well to a widescreen browser. We redesigned key screens, creating adaptive layouts that worked across breakpoints.
3. Web performance: While Flutter Web has improved dramatically, load times and initial rendering can still lag, especially on slower machines. We optimized this by lazy-loading screens, reducing third-party packages, and customizing asset delivery.
4. Authentication and session handling: On mobile, sessions tend to persist. On the web, the session can reset on refresh or tab close. We implemented secure cookie-based authentication and handled token expiry more gracefully to avoid booting users out.
5. Federated authentication: Our client used OKTA for identity and access management, and while authentication worked seamlessly on mobile, things got complicated on the web. One of the trickiest issues we encountered had nothing to do with Flutter and everything to do with browser behavior.

The challenge? CORS.

Cross-origin Resource Sharing (CORS) isn’t something one deals with much in native mobile apps. But in a browser environment, it’s front and center. We had to work closely with the client’s identity management team to ensure that all the right domains were whitelisted and that token flows worked correctly across different environments. We realized that baking the CORS integration into planning early while moving to the web avoids late-stage surprises when using federated authentication like OKTA.

Performance considerations and lessons learned

Load times were longer than a typical React-based web app, especially on slower networks. We addressed this by optimizing asset sizes, lazy-loading screens where possible, and being conscious of third-party libraries. We also ran into some layout quirks that appeared only in certain browsers, which meant more testing and edge-case handling. If ever, a client wishes to extend a Flutter app to the web, we suggest budgeting time for performance profiling and browser-specific QA.

Here are a few tips:

• Plan for platform differences from the start: Think through navigation, layout, and session management early on.
• Modularize code: The more one separates the logic from the UI, the easier it will be to adapt it.
• Test on real devices: Emulators are helpful, but nothing replaces real-world browser and device testing especially for healthcare users who may use older hardware or browsers.

The business win

The client was able to:

• Reuse 70–80% of the existing codebase
• Launch a web version in record time
• Provide a unified experience to users regardless of device
• Reduce their overall development and maintenance costs

For us, it also validated Flutter as a viable framework for multi-platform delivery in regulated industries like healthcare. Flutter is a powerful cross-platform tool that, when used strategically, can speed up development, lower costs, and improve overall quality. That said, it has challenges—especially when transitioning from mobile to web. For us, the journey has been well worth it. We’ve delivered more value to our healthcare client, reduced tech debt, and created a foundation that can evolve with their needs. As an digital transformation and experience enabler, telling our clients, “Yes, we can build that once and take it to multiple platforms,” is a game-changer. After all, isn’t that what modern software delivery is all about?