5 Lessons I Learned From Building a Web App With Flutter

5 min readDec 1, 2020

Things to keep in mind if you build a web app with Flutter

Photo by the author.

The aim of this article is to give a heads-up to all the developers out there so that they can build and plan better web apps, set them up for success, and help avoid some embarrassing issues I came across.

Note: As of November 2020, Flutter for the web is still in beta. After playing around with some POCs, I felt it was a fit for my application requirements, so I went ahead with it for production.

I initially wanted to use Firebase Realtime Database, but Google has surprisingly yet to build the plug-ins for Flutter web. As such, I had no other choice but to use Firestore, which worked out pretty well.

The Project

Recently, I got an opportunity to work on an app from scratch with limited time and resources. After taking into consideration the requirements and constraints of the real-time application, I chose Flutter + Firebase.

No support for Flutter web so far for Firebase Realtime Database plug-in

As I was looking into the database options in Firebase (Firestore and Realtime Database), I realised only Firestore was supported for Flutter web, so I didn’t really have any other options.

1. Check and Plan for Plug-In Support

Even though Flutter is pretty powerful and comes with a lot of basic components of an application (such as routing, state management, etc.), when working on bigger applications, you will be depending on plug-ins. Before committing to your tech, think about the plug-ins you wish to use and their support.

Big kudos to the awesome Flutter community, as they have done some really amazing work building a wide range of plug-ins — even for Flutter web. This gives me a lot of confidence that Flutter web will only become more capable in the future.

The developer experience has been smooth as always. I had been using the iPad simulator to use the hot-reload functionality at the time of development, as it is not there for Flutter web.

So I have been doing my active development using the iOS simulators for the ease and speed of development, which brings us to the second lesson.

2. Inconsistent Results for Flutter Web

Yes, Flutter web is still in beta and I am not here to complain about that. I just want to give a heads-up to other developers so that they are aware of it and can mitigate accordingly.

I have been developing Android and iOS apps on Flutter before this project for a while and never faced any issues with the consistent performance of the apps on both platforms.

Both Android and iOS apps ran the same as expected, and I assumed the same with Flutter web. Unfortunately, that wasn’t the case.

Android users running the Flutter web app on their browsers had the following issues:

The emoji don’t show up/are not supported. GitHub issue.
The most embarrassing and weirdest issue is that some part of text just randomly becomes invisible across the app, and this issue is completely random. It works fine most of the time but shows up once in a while. GitHub Issue.

iOS and desktop users running Flutter web on their browsers didn’t show any issues, which is great but brings us to lesson #3.

3. Do Thorough Testing for All Browsers and Platforms

This is a web app we are talking about, and being a mobile app developer, I was lucky to not struggle as much as my web developer counterparts who had to do rigorous testing for different browsers running on different screen sizes.

Moving to the web with Flutter dragged me into that dangerous yet exciting territory.

I was using an iOS simulator for development (to utilise hot reload for speed of development) and the web app behaves a bit differently compared to an iOS app.

Hence, once you cover a certain milestone of your development work, take out time to run and test your app across multiple devices, OS, and browsers.

Since Flutter is growing from stable Android and iOS and moving into web and other platforms in the future, our power as developers is also increasing — and with great power comes great responsibility.

Be a responsible developer by having an automated test suite to accompany you and give you more confidence compared to manual testing to keep your project maintainable when deploying your apps across all these platforms for the long run.

Speaking of different screen sizes, this reminds me of lesson #4.

4. Invest Time Into Setting Up a Framework for Building Responsive Layouts

I learned about building responsive layouts from the video below, and then I created a Flutter-Starter boilerplate code project that I use to set up my Flutter projects. It contains the framework for my responsive layout along with the routing logic.

This way, I don’t have to remember all this code whenever I start new Flutter projects and simply build on top of my boilerplate code project.

5. Plan for Routing

When working on mobile apps, I never had to worry about this. Navigator.pushNamed() worked for almost all of my requirements and hot reload did a great job of preserving the state of my application at the time of development.

But there are two things that are available to web app users at all times and never to mobile app users:

Refresh button — Users can hit it at any time and it will take them back to the starting screen of your app. To maintain the state of the refreshed page, you will have to save that page state before the user hits the refresh button, push the appropriate route, and push back the saved state.
Visible URL — They can see it updating and can manipulate themselves to interfere with the routing logic of your app. Default routes in a Flutter project don’t really update the URL and the app feels like a single-page app.

Hence, routing becomes an important area to focus on in order to maintain a great user experience. The Flutter-Starter boilerplate code does take care of setting up named routes as well. This is some basic boilerplate code you don’t have to keep on top of your mind.