If you are anything like me, you wouldn’t like having to always open VS code whenever you want to try out a new feature or run a simple code snippet. For simple things like these, using a web-based code editor is quicker and easier.

There are many web-based code editors out there with great support for most modern programming languages and frameworks, but the number of these web-based editors that provide great support for Flutter are few. Of these few, we have GitHub Codespaces.

GitHub Codespaces is a solution that provides an in-browser experience for coding. It comes with some Codespace templates to enable you to quickly set up a VS code-like development environment for your projects, and even though GitHub Codespaces can be used for Flutter, it doesn’t provide a Flutter template for getting started. You need to set it up from scratch.

In this post, I will be explaining how to set up a GitHub Codespace for Flutter, why you may want to use a solution like this, and the downsides of using something like this.

Why Use GitHub Codespaces for Flutter Development

As earlier stated, one of the perks of using GitHub Codespaces for Flutter development is the ability to quickly experiment without setting up a local development environment. Setting up a development environment for Flutter can take quite some time, and using GitHub Codespaces can help expedite the process.

One other benefit that comes with using GitHub Codespaces is that it eliminates the need for high-end PC for building. Normally, developing Flutter apps consumes a lot of memory, especially when building Android apps. But with GitHub Codespaces, you can write Flutter code even on Chromebooks/iPads while still maintaining a decent developer experience. Being able to do this makes your dev environment portable—wherever your iPad can go, your Flutter code can follow.

GitHub Codespaces also provides a great way for anyone wishing to learn app development with Flutter without having the budget to purchase a system that meets the development requirements.

Tip: You could mitigate the effects of having low system specs by using a Linux distro on your machine — preferably a lightweight one. Windows isn’t as good as Linux at managing system resources.

Setting Up a Flutter Codespace

Since there is no official Codespace template for Flutter, to get up and running, we need to create a new GitHub repo and configure a Codespace with CirrusLabs’ custom Docker image.

.devcontainer/
  └── devcontainer.json

This is what the devcontainer.json file will contain:

{
  "name": "Flutter Dev Container",
  "image": "ghcr.io/cirruslabs/flutter:3.32.0-0.1.pre",
}

With this set up, use the following steps to create a new Codespace from the repository:

  1. Click on the “Code” Button:

    On the repository page, click the green “Code” button to open the dropdown menu.

  2. Select the Codespace Tab:

    In the dropdown menu, switch from the “Local” tab to the “Codespaces” tab.

  3. Create a New Codespace:

    Click the “+” icon, which will start the process of setting up a new environment for you.

  4. Wait for the Codespace to Start:

    GitHub will now create the Codespace, which may take a few moments. Once it’s ready, it will automatically open in your browser with a full development environment.

Once the environment is open, you can proceed by installing the Flutter extension for VS code and creating a new Flutter project as you normally would.

Alternatively, if you already have a Flutter project on GitHub, you can simply add the devcontainer with its configuration, open up the Codespace, and start making changes.

Possible Drawbacks of Using GitHub Codespaces for Flutter

  • Slow Reload: One of the downsides of using GitHub Codespaces for Flutter is the fact that you have to manually reload the page whenever you save new changes in your code, and each time you refresh, it takes a noticeable amount of time before the page comes up and the changes reflect. Some people may not see this as a big deal, while others, like me, would.
  • Limited Free Usage: Another downside to using Codespaces for Flutter, which is not a major issue, is the limited free plan. GitHub only gives you 120 core hours and 15 GB of storage per month for the free plan, and the minimum core count for the cheapest machine type is 2 cores; this translates to 60 hours of usage time per month or 2 hours per day—which is still not that bad—but it means you wouldn’t be able to build big projects quickly with it, unless you pay for the Pro plan.

Final Thoughts

GitHub Codespaces isn’t a complete replacement for your local setup, but it’s a powerful alternative if you need to test something out or build something small. I think the best use case for this would be learning Flutter when you do not have a computer robust enough to handle app development.