Setup a Flutter Web Project on GitHub Pages

Setup a Flutter Web Project on GitHub Pages

After my last blog entry, I got asked how I created a Flutter web project and how I managed to deploy it. So join me on the journey how to create a Flutter web app and implement the whole thing on GitHub Pages.

Flutter Channels

To enable flutter web, you have to set up your Flutter CLI properly, and after that, you have to make sure you are on the right channel. Today when I write this post, Flutter web is still in beta, so we have to select a branch that supports beta features.

The master channel is the current tip of development. It contains the newest changes in the framework but it is also vulnerable to breaking changes. So that means in the worst case something is going wrong. The beta channel is a code selection of the flutter team once a month to a branch that contains the newest released features. It is selected and more stable. So if you want to try around, this would be the channel to go.

For more information about the channels in Flutter, take a look here.

Enable Flutter Web

After we set the correct channel and downloaded the new version of flutter, we have to enable the web development model.

Now we are ready to go. Next, we have to create a basic Flutter project. This will create all the relevant folders for us.

Flutter create will create all the relevant folders for us. If we open up that project, we should see now the folder “web” inside of the project.

File Structure that shows the current project
File Structure for the Flutter project

The last step is to run the app. So go into the project folder and run flutter devices. We should see now chrome and Web Server as a choice.

After the flutter run -d chrome command, the chrome browser will start up and reveal the Flutter app.

Perfect, we did it!

High Five Best Friends GIF - Find & Share on GIPHY

Deploy on GitHub

Before we can deploy, we have to create a new repository in GitHub and in order to use it as GitHub pages, it needs to have a specific naming convention.

Template: >GitHub-UserName<.github.io
Example: md-weber.github.io

Now we can create anything that we want in our Flutter app. If we are ready to go we have to build the app.

After that in your project will be a build/web folder. This folder contains all the files that you will need to upload to your GitHub Repository. Open a terminal and switch to the folder and push it into your repository.

If you are new to GitHub and Git this Guide could help you.

After the push, GitHub will take care of the rest. It immediately creates for you an environment and pushes your changes to the website. Inside of your GitHub repository, you will find a new Tab called environments. In this tab, you can see how far your deployment process is.

GitHub Actions screen

Now you can enter find under https://::username::.github.io or my example https://md-weber.github.io/.

If you get at that stage a 404 error, please try to add the /index.html to your path and now you should see your very first Flutter Web App. For more information I created a video that explains everything a little bit in more detail.

Thank you for reading!

Leave a Reply