Use GitHub Pages to host your Flutter Web app, as an example of your Flutter package

Once you create a new shiny Flutter package, you always also make an example app for other developers who love your package.

Since Flutter supports web, you can compile your example app to a web app. and use GitHub pages to host your web page, if your repo is hosted on GitHub. It helps others to learn what your packages could do quickly and easily.

I published a package last week, twicon, it helps developers to use a set of great icons about Taiwan, the beautiful island where I live in. These icons from two designers who are not Taiwanese citizen but live in and also love Taiwan. I make the example of the package available on the GitHub Pages: https://zonble.github.io/twicon .

I also add Flutter Web examples to several Flutter packages:

• Flutter Turtle (project|example)
• Flutter Animated Play Button (project|example)
• Flutter Progressed Play Button (project|example)

All you need to do is to create a GitHub Actions workflow in your Flutter app repository.

At fist, you need to generate a new personal access token in order to publish the built web app to GitHub Pages. Please visit https://github.com/settings/tokens to generate one. Then, go to the settings page of your GitHub repository, go to “Secrets”, click on “Add a new secret”, and paste your personal access token and name it as “ACCESS_TOKEN”.

Then, create a file “.github/workflows/workflow.yml” in your repository. The content of it is:

name: Flutter Web
on: [push]
jobs:
  build:
runs-on: ubuntu-latest
        
    steps:
    - uses: actions/checkout@v1
    - uses: actions/setup-java@v1
      with:
        java-version: '12.x'
    - uses: subosito/flutter-action@v1
      with:
        flutter-version: '1.12.x' # you can use 1.12
        channel: 'beta' # Currently you have to use beta channel for Flutter web.
    - name: Upgrades flutter
      run: flutter upgrade
      working-directory: ./example
    - name: Enable Web
      run: flutter config --enable-web
      working-directory: ./example
    - name: Install dependencies
      run: flutter packages get
      working-directory: ./example
    - name: Build Web
      run: flutter build web
      working-directory: ./example
    - name: Deploy
      run: |
        cd example/build/web
        git init
        git config user.name  "CI"
        git config user.email "flutter-ci@github.com"
        git remote add secure-origin https://${{ secrets.ACCESS_TOKEN }}@github.com/[YOUR_USER_NAME]/[YOUR_REPO_NAME].git
        git checkout -b gh-pages
        git add .
        git commit -m "Updated docs"
        git push --force secure-origin gh-pages

Please replace [YOUR_USER_NAME] and [YOUR_REPO_NAME] with your correct settings. Commit the file, then you can see GitHub starts to build the web app and upload it to GitHub pages for you.

Finally, go to the project setting, enable “GitHub Pages” and select the source to “gh-pages” branch.

Done!