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!
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.
Let’s start with creating a project
- Make sure that you already installed the flutter.
- Create a project.
flutter create name_of_the_project
3. Let’s change the project directory to the created flutter project.
4. Let’s run the flutter (web).
flutter run -d chrome
This will take some time. . . .
Let’s start the Flutter and PWA
- Go to this site for the PWA’s manifest.
For this JSON file. this is for the PWA to work.
2. Fill up App name, Short Name, Display Mode, Orientation, and Icon.
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.
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.
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
9. Now, we need to upload the website.
- Go to /build/web/ folder destination.
- Let’s apply surge by using this command.
- Login or Create an Account in Surge, just enter email, password, project, and domain.
10. Let’s open the site to our browser. Just copy the input domain and paste it to your browser.
11. Let’s open the domain to the browser of your mobile devices.
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.
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!