5 Lessons I Learned From Building a Web App With Flutter

5 Lessons I Learned From Building a Web App With Flutter

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

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

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 from Firebase Realtime Database

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 appon 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.

programming mobile flutter

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Google's Flutter 1.20 stable announced with new features - Navoki

Google has announced new flutter 1.20 stable with many improvements, and features, enabling flutter for Desktop and Web

What is Flutter and why you should learn it?

Flutter is an open-source UI toolkit for mobile developers, so they can use it to build native-looking Android and iOS applications from the same code base for both platforms. Flutter is also working to make Flutter apps for Web, PWA (progressive Web-App) and Desktop platform (Windows,macOS,Linux).

Flutter App Development Trends 2020

As the new decade dawns upon us, a slew of technologies has been making a lot of noise to grab the developers’ attention. While native app development is going strong, the trade winds are now blowing towards going cross-platform.

Top 25 Flutter Mobile App Templates in 2020

Flutter has been booming worldwide from the past few years. While there are many popular mobile app development technologies out there, Flutter has managed to leave its mark in the mobile application development world. In this article, we’ve curated the best Flutter app templates available on the market as of July 2020.

"Flutter Is To Apps As Unity Is To Games" - Tim Sneath

Flutter Is To Apps As Unity Is To Games. We talked with Tim Sneath, Google's product manager for Flutter and Dart, about how both the language and the framework have evolved over the last two years, how they're being used today, and where they're headed.