Building Our Web Application with Flutter: A Developer’s Journey

When we embarked on building a web application for one of our clients, we knew we wanted to use a cutting-edge framework that would enable us to deliver a high-quality product across multiple platforms. After much deliberation, we decided to explore Flutter Web, the extension of the popular mobile development framework. Initially known for its mobile prowess, Flutter was beginning to gain traction in the web development world, and we were eager to see how it would perform for our specific use case.

This blog will take you through our developer’s journey—a week-by-week account of our experience building a web application using Flutter. From tackling the initial setup to dealing with unexpected challenges, we hope to share insights that can help you on your own Flutter Web development journey.

Week 1: Setting Up and Getting Familiar with Flutter Web

The first week was spent on research, configuration, and understanding how to properly set up Flutter Web for our project. Having already worked with Flutter for mobile, we assumed that the transition to web would be straightforward, but we quickly realized it involved a different set of challenges.

Initial Setup

We began by setting up the necessary Flutter Web libraries and configuring tools to handle responsive design and UI scaling. Building a web application with Flutter involves different considerations than mobile, especially when it comes to handling various screen sizes and ensuring a seamless experience across devices.

We also spent time exploring routing and the proper handling of URLs—something that’s not as prominent in mobile app development but crucial in web development. Additionally, we ensured that features like selectable text were implemented correctly, which was a bit more complex than we anticipated.

Challenges

The biggest challenge during this phase was configuring the responsive design. We had to adjust the layout to accommodate varied screen sizes, which meant not just resizing elements but also ensuring that the UI components were displayed correctly across different devices.

At this point, we were diving into the Flutter Web documentation and exploring the resources available for web-specific use cases. The complexity of building a responsive, scalable UI for the web became apparent, but we were determined to push through the early setup phase.

Week 2: Coding the UI and Overcoming Limitations

By week two, we began the actual coding phase. The early setup was behind us, and we could start focusing on building the core features of the web application. This phase was more about trial and error, but we began to see how Flutter Web could be a powerful tool for developing cross-platform apps.

Responsive Design

One of the first things we noticed was that building for the web required far more attention to layout and scaling than mobile development. While mobile apps generally have a smaller range of screen sizes to account for, the web requires designing for a far broader array of devices.

We had to switch from using fixed pixel (px) units (common in mobile apps) to more flexible units like sp, h, and w to ensure the app looked good on screens of all sizes, from desktop monitors to mobile phones.

Hover States and Widgets

Flutter’s mobile widgets don’t always translate well to the web. For example, we had to rethink certain interactions that were designed for touch interfaces on mobile. In contrast, web users often expect a different kind of interaction, such as hover effects and more intricate pointer-based UI components.

We spent a lot of time working with widgets that have hover properties, such as buttons, menus, and links, to ensure the user experience was intuitive. This was one of the highlights of Flutter Web’s flexibility, allowing us to adapt our mobile-first designs to the desktop and web interfaces seamlessly.

Limitations and Surprises

While we were making great progress, we encountered a few limitations that forced us to reassess our approach. For instance, certain commonly used widgets in mobile development, like Svg and Image.network, didn’t work as expected on the web. This required us to look for workarounds and alternative widgets or solutions to fulfill the same functionality.

Additionally, we encountered a few web-specific challenges—such as CORS (Cross-Origin Resource Sharing) issues and the fact that searching with Ctrl+F didn’t work as intended. There were also zooming issues on some browsers, which presented a problem for users who expect basic web navigation functionality. These limitations, while frustrating, gave us a deeper understanding of the current state of Flutter Web and its development.

Week 3: Finding Our Rhythm and Exploring Deployment

By week three, things started to feel much more natural. We had adjusted to Flutter Web’s peculiarities and were coding the UI much faster—approximately 50% faster than we had been in the early stages.

Improved UI Coding Efficiency

As we became more comfortable with the layout system and how to handle responsive design, the time it took to build pages and sections of the app began to decrease significantly. Our knowledge of Flutter Web’s layout widgets (like Flex, Expanded, and MediaQuery) allowed us to speed up our development process without sacrificing quality.

We also spent time optimizing the performance of the app. Although we were still facing performance concerns typical of Flutter Web (larger bundle sizes, slower load times), we were actively researching ways to optimize and improve the app’s performance. Some of these efforts involved breaking the app into smaller components to improve load times and using tools to analyze and monitor performance.

Deployment and Hosting Challenges

One of the final tasks of week three was figuring out hosting and deployment. Flutter Web offers several options for hosting, but each comes with its own set of complexities. We researched and tested several deployment strategies to ensure that our app would perform well in a production environment.

Given the nature of Flutter Web’s build process, we had to look for hosting solutions that could handle its larger file sizes and optimize loading times. We eventually decided on a cloud hosting provider that offered CDN support, ensuring the app could scale globally.

The Result: A Product Built with Flutter Web

After several weeks of hard work, we were able to complete the web application. The development journey with Flutter Web was full of surprises, challenges, and moments of clarity, but the end result was a sleek, responsive, and cross-platform web application.

For a closer look at how we used Flutter Web to build a product with scalable UI, interactive widgets, and smooth navigation, you can refer to the demo website we’ve created, which is similar to our Madison Technologies homepage.

Madison Technologies: Flutter for Web Development

At Madison Technologies, we pride ourselves on staying at the forefront of innovation. We specialize in developing Super Apps, PropTech, and FinTech solutions, offering comprehensive services that include Cloud Computing and Security. Our expertise extends to Flutter Web development, and we are equipped to help you build fast, responsive, and high-quality web applications that can scale across platforms.

With a dedicated team of experts, we can guide your business through every stage of development—from initial design to deployment. Whether you need a Super App for PropTech, Secure Cloud solutions for FinTech, or a customized Flutter Web application, we have the experience and tools to bring your vision to life.

#number1_superapp #security_for_malaysia #cloud_computing_for_malaysia #fintech_development_for_malaysia #outsourcing4malaysia #proptech_development_for_malaysia #dedicated_team_for_malaysia #FlutterWebDevelopment #FlutterForWeb #SuperAppDevelopment #WebAppDevelopment