Flutter

GitHub Codespaces: Code on the Go with Flutter

Additional Contributors
No items found.

Last Friday I received some very good news in my inbox — an invitation to try GitHub Codespaces beta

I immediately took one of my example Flutter projects (Fluttersaurus) and created a codespace for it. I was able to install VS Code extensions in my browser, customize my theme (dark mode ftw!), and proceed to use VS Code. It even has integrated terminal support so I could execute commands like I normally would. It’s literally the same coding experience — just in my browser. 

Codespaces view of Flutter code
Fluttersaurus as a codespace!

About Codespaces

For some background, GitHub Codespaces allows you to edit, run, and debug your project using VS Code directly in a web browser. I can imagine this will unlock the possibility of coding on the fly using chromebooks, tablets, etc. without having to invest in an expensive, high-spec machine. 

It’s super easy to set up and feels cool to be able to do all of the things I normally do on my desktop, but from anywhere! I was so impressed, I even messaged our team slack:

Slack message about Codespaces

Running Flutter in Codespaces

The only caveat with Dart and Flutter is that you need to add a devcontainer.json with a reference to a custom docker image that includes the Flutter and Dart SDK. Shoutout to Rody Davis and Abhilash Chandran for pointing me in the right direction for how to set this up! The mobile simulator/emulator is not currently supported, so you may have to use Flutter web to run the code from the comfort of your browser.

How to configure devcontainer.json

In order to run a Flutter app within GitHub Codespaces, a devcontainer.json file must be included as part of the project within a devcontainer directory. In the devcontainer.json, specify either an existing docker image or a path to a docker file, which includes the Flutter SDK. In addition, this configures a forward port to allow you to run the app in your browser.

Example devcontainer.json
Example devcontainer.json

How to Run Flutter App from Codespace

In order to run the Flutter app from your codespace, run the below command. Remember to set the web hostname to 0.0.0.0 and ensure the web port matches the forwarded port in the previous step.

Command to run Flutter app in codespace
Command to run Flutter app in codespace

Pricing

In beta, Codespaces is currently free. Based on the pricing model, you should be able to rely on this new offering for development for a couple hundred dollars a year once it goes public.

Final Thoughts

In its early stages, Codespaces in your browser won’t solve all of your needs. But there’s still the option to open your codespace locally in VS Code and continue working as you normally would.

Currently I plan on using Codespaces beta for quick development on the go and I’m excited to see what lies ahead!

Try it out with Codespaces!

Click here to check out the example used above.* If you have access to Codespaces, you can select "Open with Codespaces" from the code dropdown.

*You can request early access to GitHub Codespaces beta here.

Read More

More from the VGV Blog

Flutter 5 Questions

December 10, 2019
By 
David DeRemer
Flutter

To Flutter, or Not to Flutter?

December 6, 2019
By 
David DeRemer
Flutter