Gitpod Flutter

Preface

This is a gitpod solution to create and test apps with Flutter when you don't have access to necessary tools to do so.

Using the device_preview package will help with the feel and understanding when working in the vnc. Take a look at the master branches sample project for an example.

With the release of Flutter 2.0 the Flutter team has included support for Flutter desktop. Using gitpod-vnc, this solution will allow teachers, tinkers, students and all to run Flutter.

There will be 2 branches in this repo:

• master branch will contain the pre-configuration for a sample flutter project.
• dev branch which will contain the pre-configuration with just the necessary Docker files the README.md in there will go in more depth on how to configure your own project

I strongly recommend anyone using this repo's dev branch to install device_preview package into their for a better experience.

Setup

Once the gitpod container finishes loading up follow these steps:

1. Open up the folder called "flutter_project" then open up the folder called "lib" the select and open main.dart.
2. Press F5 to activate debug mode (Alternatively you can run flutter run -d linux to manually control reloads)
3. Once debug mode loads click on the ports button on the bottom of the code editor to open "Ports View": This is to access the ports section in gitpod
4. Hover over the port option 6080 and then you will be presented with three options. The option with the globe will open up a new tab with the vnc. Alternatively you can also click the open preview icon to use the simple browser extension to open up the vnc right in the code editor.

Credit

Credit to vtorres/gitpod-flutter for the idea. Their solution allows running flutter web in gitpod with the limitation of no hot-reload. They also detail a solution that allows to test the app on a physical device.

Disclaimer: I have not tested the physical device feature but it seems like a viable solution