Develop on Gitpod

Gitpod is a dev environment as a service platform, allow you to quickly develop applications without setup the code editor, tools, dependencies etc.

The development environment is particularly limited. You can only develop for Flutter web. See here.

Getting started

Click on Open on Gitpod button from the README. Login to Gitpod and wait for the prebuild to complete.

To verify Flutter is ready on our remote machine, run:

flutter doctor

Output will look something like this

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.3.0, on Ubuntu 20.04.4 LTS 5.15.0-47-generic, locale en_US.UTF-8)
[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
[✓] Chrome - develop for the web
[✓] Linux toolchain - develop for Linux desktop
[!] Android Studio (not installed)
[✓] Connected device (2 available)
[✓] HTTP Host Availability

! Doctor found issues in 1 category.

Running app

Open pubspec.yaml file, and click Get packages. (or run flutter pub get manually)

To start development, we can run our app on web:

flutter run -d web-server

After successful build, it will output something like this:

Launching lib/main.dart on Web Server in debug mode...
Waiting for connection from debug service on Web Server...         33.3s
lib/main.dart is being served at http://localhost:41219
The web-server device requires the Dart Debug Chrome extension for debugging. Consider using the Chrome or Edge devices for an improved
development workflow.

🔥  To hot restart changes while running, press "r" or "R".
For a more detailed help message, press "h". To quit, press "q".

Notice that it says our app is served at http://localhost:41219. Take note on the port, in this case the app is running on port 41219.

So, on the sidebar of the editor, click on Remote Explorer and find the correct port. By default, the port is private, to make it public (so that we can access), click on the lock icon.

After the port become public, click on the globe icon to launch our web app in the new tab.

Develop

Make change to the code, save it and type r on the console to hot reload the app. (You may need to refresh the running app to see changes)