Flutter for Web is announced in Google I/O few months back as a technical preview. Here in the article let’s learn to create a new flutter web app and host the app to firebase with firebase hosting.
Before we start, let’s just upgrade flutter, so we have the latest version. Inside a terminal window, run:
flutter upgradeMight take sometime relax, have a coffee. Wait for it to complete.. Done. Great!
Create new flutter web project:
Here i’m going to use VS Code as my IDE for editing and creating new flutter web app.
From menu View-> Command palette.. or Ctrl + shift +p
type Flutter Web from suggestion choose Flutter: New Web Project
Next enter your project name and press enter on prompt choose your project location and press enter.
Wait .. it will take some time to complete. Once done, Choose Debug -> start Debugging or Press F5
VS Code will prompt to Activate WebDev press Activate Webdev
VS Code will start compiling the project and serves the project from `web` on http://127.0.0.1
Or manually navigate to the created projects path in terminal and enter the following command.
flutter packages pub global activate webdev flutter packages upgrade
Running the Flutter Project in Browser
Well, if you followed all the above mentioned steps properly, then this should be as simple as executing the following command from inside the flutter web project directory.
webdev serve
Once done Open http://127.0.0.1:8080/#/ in any browser. If everything is success it should open the following page.
Now everything is all set. Open the main.dart file under lib folder and start editing your project.
Now build the project , enter the following command in terminal
webdev build
After the command is executed, we can see that in our project folder a new folder named build is created.
Deploying to firebase Hosting:
Setup the firebase CLI by following this guide.
.. and continue with this once the setup is competed. Under the flutter project root execute the following command
firebase init
Choose Hosting: Configure and deploy Firebase Hosting sites by pressing space bar and press enter
Then choose your project from the list and press enter.
Once it asks for public directory enter build and press enter
When it asks for rewrite index.html give N and hit enter
Once the initialization is completed , Enter the following command in terminal
firebase deploy
If everything went fine the terminal will give the following logs
The hosting url and project console path is logged press ctrl+ click to open the link. for eg : Hosting URL: https://xyz.firebaseapp.com
Hope this article helps you. Like and share 🙂
Thank you for reading.
