Automatically deploy Flutter web project to GitHub pages using GitHub actions

I have been developing my own Flutter package gallerize. It helps project owners of Flutter packages to build a demo of what they are creating, inspired by Flutter Gallery.

As Flutter packages usually come with an example project, I also created one for my package. Then, I wanted to host it as a web page (using Flutter web) directly on the project’s GitHub pages site. I could not find any simple example of how to set up GitHub actions for automatically deploying a Flutter web project to the gh-pages branch of that project. Therefore, I decided to explain it for everyone.

In order to be compatible with web, check that your project works with Flutter web by reading the documentation.

How to create the GitHub action

In your project root, create a folder .github and within it another folder workflows:

/
├── .github/
│   ├── workflows

Within .github/workflows/, create your GitHub action file deploy_web.yaml, which looks as follows:

After having created deploy_web.yaml, push your changes to GitHub.

Whenever you create a new tag within your project, the action will build the project within example/ and deploy example/build/web (the outcome of the build) to your gh-pages branch.

Of course, the action can also be triggered on push to master or on other events. See events that trigger workflows.

Once your action pushed to the gh-pages branch, the page will be hosted on https://<user>.github.io/<repository>/.