Flutter on the web for mobile developers

This section is for you if you come from a mobile development background and try to approach Flutter on the web in the same way you would mobile development. You must understand one important thing: the web is fundamentally a different platform than mobile. It has tons of differences compared to the mobile platform.

First and foremost, unlike mobile applications that target specific platforms and devices with specific capabilities, a web application might run on a wide range of devices including mobile devices, desktops, laptops, and even embedded devices. Each of these devices has a different operating system (OS) with different capabilities under the hood. Accessing device functionalities is not as easy as with mobile devices as there are many security concerns as well as performance issues. Though with HTML5 there has been a lot of improvement in accessing device capabilities, it is still not as powerful as mobile APIs themselves, due to the wide range of devices available for web browsing. As web developers, we will have to think of all those responsibilities. Though most of the work is already delegated to plugins with Flutter, we still must think of using those plugins effectively and also think of situations where certain functionalities may not be available and the app will still have to be usable.

The next thing to remember is that the mobile application is downloaded and installed on the user’s device. This means the application lives on the user’s device, whereas a web application lives somewhere in the network and is only downloaded once the user requests to view it via their browser. In most cases, when a web application is viewed, only the requested page or part of the application is downloaded to the user’s device. However, as we already discussed in the previous section, Flutter’s web application is a single-page web application, so the whole application is loaded when the user requests the application. In many cases, when the user wants to use the application again, they will have to download the application again, making a request via their browser. The key thing to understand from this difference is that a web application has to think carefully about its size, as it’s downloaded every time a user wants to use that application. In recent years, PWAs have come into being, and are essentially trying to be the best of both worlds. We will talk in detail about PWAs in later chapters.

Another thing to notice here is that as the mobile app lives on a user’s device, the user will have to download updates each time the developer pushes new updates. The user may decide not to update, however, when it comes to web apps living on the server, once the developer updates them, users will get the updated version on their next request. So, a web app is a lot easier to maintain compared to mobile apps.

Unlike mobile applications, a web application also has to take into account a wide range of devices and platforms. Each device and platform has its own pros and cons. The web developer has to think of each platform and device, too. There is a huge variety of possible devices, each with different screen sizes and densities, different platforms, and OSs with different capabilities that the web app could run on. There are also concepts such as Responsive and Adaptive designs, where the design should be made dynamic to adapt to each platform and device. As a web developer, you will have to think of how to leverage the tools provided by the framework to create a web application that feels and behaves natively on any platform it is accessed on, no matter the capabilities of that platform. We will discuss more on this topic in Chapter 3, Building Responsive and Adaptive Designs.

Therefore, when you look at using Flutter for building web apps, you have to think beyond mobile development. In a web application, you will have to think of a wide range of screen sizes and the capabilities of devices that might run the application. You’ll need to think of the wide possibilities of different platforms. You’ll also have to think of the initial load time, as all the resources will have to be downloaded with the request.