Deploying your Flutter WebApp to GitHub Pages

Taking Flutter Beyond Mobile

In my previous post, I did show you How you can build your First Flutter Webpage. Now that once you developed your beautiful webpage it's time to deploy it.

Here's my Flutterweb page by the way linked to my portfolio on GitHub Pages.

There are several ways and places to deploy the web page but what could be the best place to showcase your work other than GitHub pages? Well before you deploy it, if you have been following my previous post there’s one more thing left to do.

go ahead to the root of your project and Use the following command to do a production build to your app

flutter build web

What this basically means is the dart2js compiler converts the dart code into javascript(That’s what most of modern browsers understand) that can run in a browser. You can read more about the dart2js compiler here.

In the root folder of your project, you will see a build folder containing a web directory that contains all your release files.

Now It's the time to set up the Github pages

If you already have a GitHub page skip the First and the second step and go to the third step.

1. Head over to Github and create a new repository named username.github.io, where the username is your username (or organization name) on GitHub.

Note: If the first part of the repository doesn’t exactly match your username, it won’t work, so make sure to get it right.

2. Once you have created the repository push your files and folders under the build/web directory using git. Once you have pushed your files to yor repository your webpage will be available at this URL. 😃

http(s)://<username>.github.io/

and you don’t need to follow any further steps that is all 😃.

3. But If you already have a Github page running then you need to develop a Project page site. That means your web app will be available at a URL…