Building a Flutter Web App for Healthcare | Brillio

Healthcare | Products and Platforms

Bringing a mobile health app experience to the web

27th June 2025

Learn how to successfully migrate a Flutter mobile healthcare app to web, including solutions for CORS authentication, performance optimization, and responsive design challenges. This case study demonstrates reusing 70-80% of mobile codebase while delivering consistent cross-platform user experiences.

We took a Flutter app from mobile to the web to build a robust multi-platform experience for a healthcare client.

The backstory

We helped a healthcare client build a new mobile experience using Flutter app development.

The goal was simple: build a fast, intuitive, and reliable app that worked across iOS and Android using a single codebase – a core principle of application modernization that ensures scalability and long-term agility. Flutter didn’t just deliver—it impressed. But as with many digital transformation and digital healthcare solutions 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

The client wanted a consistent, accessible experience across platforms, including a robust member experience on the web.

With users ranging from young adults to senior citizens, UI consistency and performance were key. In fact, research shows that in the U.S. over 60% of patients are using mobile health applications or digital health tools to manage their health — underscoring the need for web accessibility and responsive design in digital healthcare solutions. Keeping all this in mind, 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 Flutter web app 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 a Flutter Web App for a Healthcare Client

When we started adapting the Flutter mobile app to the web, here are five contentions we had to tackle:

  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.

Flutter Web App Performance: Key Lessons Learned

The web app’s performance showed promise but wasn’t without a few crucial caveats.

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 convert a Flutter app to 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 Impact of Our Flutter App Development

For the client, this wasn’t just a technical success. It was a strategic 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 services 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?

Author Details
Kenrick Vaz

Principal Architect

Forward-looking thoughts and compelling stories

Are stablecoins the future of cross-border payments?

Blog

  • Banking and Financial Services
  • Products and Platforms

Are stablecoins the future of cross-border payments?

Read more  
Central bank digital currency (CBDC): The future of transactions

Blog

  • Banking and Financial Services

Central bank digital currency (CBDC): The future of transactions

Read more  
Developing Data-Driven Healthcare Organizations

Blog

  • Healthcare
  • Life Sciences

Developing Data-Driven Healthcare Organizations

Read more  
Generative AI: A Boon for the Healthcare Industry

Blog

  • Healthcare
  • Life Sciences

Generative AI: A Boon for the Healthcare Industry

Read more  

Start with the outcome. We'll engineer the stack.

Let’s Connect