Flutter x PWA Tutorial

Credits to the owner of the logo(s)

What is Flutter?

Flutter is a multi-platform, open-source and framework for building Web Applications, Mobile Applications, and Desktop Applications. Also, flutter is a product of Google.

Flutter has a great and organized documentary, That’s why I love using flutter because it gives us a clear vision of the documents, replicates the steps, and more. Also, It’s very easy to learn and currently, it’s getting more and more and more popular nowadays!

References: flutter, netguru

What is Progressive Web Applications (PWA)?

Some of you might have heard Progressive Web Applications (PWA), but do you know about PWA? In this article, we will give a little brief about what is Progressive Web Application.

The web application is a software that runs in the browser. Basically, it’s an application that requires a browser and an internet connection to work. Also, web applications are connectivity dependent and the disadvantages of web applications over the native or stack applications.

That’s why the solution to this problem is the Progressive Web Applications (PWA).

PWA is user-experiences that have the reach of the web, and which feel and its behavior is like a native application and this can be done by web technology stacks.

References: LinkedIn

Let’s start with creating a project

1. Make sure that you already installed the flutter.
2. Create a project.

flutter create name_of_the_project

3. Let’s change the project directory to the created flutter project.

cd  name_of_the_project

4. Let’s run the flutter (web).

flutter run -d chrome

This will take some time. . . .

This is the actual photo.

Let’s start the Flutter and PWA

1. Go to this site for the PWA’s manifest.
   link: app-manifest.firebaseapp.com

This is an actual site

For this JSON file. this is for the PWA to work.

2. Fill up App name, Short Name, Display Mode, Orientation, and Icon.

This is a sample photo.

3. Hit GENERATE.ZIP. Therefore, a zip file will be downloading in a bit!

4. If the download is done, extract it, and this will show you these files.

this is the generated files from the site.

5. Open the flutter project to your IDE, select index.html from the web folder and add this code.

<link rel="manifest" href="manifest.json"/>

The reason why we added this code because we want to implement the JSON file to the project.

6. Go to Terminal or VS Code’s terminal.

flutter build web

In this command, it will generate a build folder in your project.

You could see the generated folder after the command is done.

7. Copy the extracted file from the generated manifest and paste it to the project inside the ‘/build/web/’ folder.

8. Now, we need to upload a static website using Surge.sh, We need to install it from using the terminal.

npm install --global surge

Done installing it.

9. Now, we need to upload the website.

• Go to /build/web/ folder destination.

cd build/web

• Let’s apply surge by using this command.

surge

• Login or Create an Account in Surge, just enter email, password, project, and domain.

Successful domain! Yehey!

10. Let’s open the site to our browser. Just copy the input domain and paste it to your browser.

This is the published flutter using surge.

11. Let’s open the domain to the browser of your mobile devices.

This is form the browser.

12. Let’s add this to the Home Screen.

Step 1 : Click the More Icon.
Step 2 : Select "Add to Home Screen".
Step 3 : Click "Add" Button.
Step 4 : Click "Add Automatically".
Step 5 : Check it to your home screen.
Step 6 : Select the app and it will open the app.

Sample GIF

Thank you for reading this article, Hope this helps you in the future!
If there’s any clarification, you could help me and the community improve the article!