Automatically deploy Flutter web project to GitHub pages using GitHub actions
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/, 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