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.

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.

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
cd  name_of_the_project
flutter run -d chrome
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
This is a sample photo.
this is the generated files from the site.
<link rel="manifest" href="manifest.json"/>
flutter build web
You could see the generated folder after the command is done.
npm install --global surge
Done installing it.
cd build/web
surge
Successful domain! Yehey!
This is the published flutter using surge.
This is form the browser.
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

I’m a Mobile Engineer at @mClinica and Volunteer @ Flutter Philippines. I do explore, build, and share things I’ve learned!