Let’s implement and launch a Flutter PWA

Precious steps to develop a Flutter PWA without struggling

Sajeevan Wickramarathna
Level Up Coding

--

Progressive Web Application(PWA) is a hot technology which helps to run on mobile phone web browsers rather than installing an app in your mobile phones.

Why should we focus on PWA?

  • It is an efficient solution for limited phone storage because if we add a PWA to a mobile app, it simply opens in the mobile phone web browser and it provides the same feel as a mobile app without installing a native app.
  • PWA provides offline access where we can keep a bookmark on that link.
  • It helps to increase the performance

This article is about building a PWA with the flutter cross platform. In order to build the PWA with flutter, we need to install Flutter SDK and Chrome browser in our computer.

1. Set up flutter for web

As you know there are 4 channels in flutter and they are master, beta, dev and stable. Flutter PWA has been supported for beta and master, because only those 2 channels are the web-supported channels. But now the stable channel is also web-supported. Therefore now stable, master and beta channels can be used to build Flutter PWA.

This command will help you to download the latest dart SDK’s into your machine and this process may require some amount of time.

You should get the following output:

This command will make sure we have the latest desktop support and it has been enabled.

If the system has web support we should check whether what devices are available.

You may get output like the below snapshot:

After these steps, you have completed the flutter web setup.

2. Create a new flutter project

By following this command you can create a new flutter project in a desired folder location. If you do not change the flutter channel purposely, it is in the Stable channel.

Navigate to the newly created app on your device.

This command is really important because it helps to bring web support to the existing project. In this command “.” is most important.

According to the new version (2.0) of flutter this command is not necessary because it already contains a web folder for the newly created project and it is necessary to have your flutter channel as stable.

Here it is important to mention that there is a file called manifest.json where you can configure that file. By configuring it you can change the final web view of the Flutter PWA app.

By following those you will end up with a newly created flutter project and enable web support to it.

3. Newly created app run on Web

This command will help to run your created app locally on the machine. Then the app will open in Chrome or Microsoft Edge (previously mentioned devices list) as localhost automatically.

4. Build flutter project

By using this command your application will build and automatically create another build\web folder in the root directory of your created project. It creates the following files automatically under the newly created web folder.

If you follow the above steps(1–4), you will end up with successful creation in Flutter PWA!

In addition to that, you can move with further steps like below to deploy the created app with help of Surge. It will create a live link for test purpose. Surge is a really important tool for front-end developers because it helps you to publish your app into production in an efficient manner.

5. Deploy your PWA application

System requirements: the latest version of Node.js

This command will help you to install Surge globally in to your machine

**Before you use this command make sure you should navigate to the previously created web folder under the build folder.**

This will take some time and if the command is success at the end of time you will receive command line as follows;

By using the URL provided under domain in the command line, open it using a mobile browser.

Congratulations! Your Flutter PWA is working now.

Further, you can add a bookmark to the provided URL on your browser or you can add it to your home screen by using browser settings.

Settings > Add to Home screen

This command will help you to remove your project from the Surge and the command line will be like below:

Conclusion

Flutter PWA is a current trend and by enabling web support to the stable channel is more easier than previous context to the developers. This article has provided you with the basic steps to create a Flutter PWA in a successful manner.

Hope this may help you with a clear mind and a future article will explain how to handle the “Add to Home screen” banner.

Thank you for reading!

--

--

Final Year Undergraduate at Faculty of Information Technology, University of Moratuwa. Tech enthusiast and Dedicated.