Today I want to show how I configured Gitpod for Flutter development and how I’m running the app from cloud IDE right on my real Android device.
As you may know Gitpod is a cloud IDE. You can launch it from any GitHub repository by adding
https://gitpod.io# to repository url right in a browser address bar. You’ll get not only a ready-to-code environment but a fully functional Linux-based virtual machine. It is based on Docker and can be preconfigured for any specific repository or even branch with configuration files in in.
First of all we will need a
.gitpod.dockerfile created in the root of our repository:
FROM gitpod/workspace-full:latest ENV ANDROID_HOME=/workspace/android-sdk \ FLUTTER_ROOT=/workspace/flutter \ FLUTTER_HOME=/workspace/flutter RUN bash -c ". /home/gitpod/.sdkman/bin/sdkman-init.sh \ && sdk install java 8.0.242.j9-adpt"
It will declare some environment variables and install Java 8 with
sdkman as on the moment of writing this article Android platform tools can’t be built with Java 11.
Next we will need a
.gitpod.yml file to configure Gitpod IDE:
image: file: .gitpod.dockerfile tasks: - before: | export PATH=$FLUTTER_HOME/bin:$ANDROID_HOME/bin:$ANDROID_HOME/platform-tools:$PATH mkdir -p /home/gitpod/.android touch /home/gitpod/.android/repositories.cfg init: | echo "Installing Flutter SDK..." cd /workspace && wget -qO flutter_sdk.tar.xz https://storage.googleapis.com/flutter_infra/releases/stable/linux/flutter_linux_v1.12.13+hotfix.7-stable.tar.xz && tar -xf flutter_sdk.tar.xz && rm -f flutter_sdk.tar.xz echo "Installing Android SDK..." mkdir -p /workspace/android-sdk && cd /workspace/android-sdk && wget https://dl.google.com/android/repository/sdk-tools-linux-4333796.zip && unzip sdk-tools-linux-4333796.zip && rm -f sdk-tools-linux-4333796.zip /workspace/android-sdk/tools/bin/sdkmanager "platform-tools" "platforms;android-28" "build-tools;28.0.3" echo "Init Flutter..." cd /workspace/ha_client flutter upgrade flutter doctor --android-licenses flutter pub get command: | flutter pub upgrade echo "Ready to go!" flutter doctor vscode: extensions: - Dart-Code.email@example.com:Wg2nTABftVR/Dry4tqeY1w== - Dart-Code.firstname.lastname@example.org:/kOacEWdiDRLyN/idUiM4A==
Lets take a closer look on some entries.
tasks section will be executed upon your Gitbod environment start. We are setting
PATH environment variable and creating some directories and files for Android SDK tools to work properly. We make it in
before subsection of
tasks to execute those commands on every start because
/workspace directory of your environment is the only thing that will be saved between environment stops and starts.
That is why we will put Flutter tool and Android SDK into
/workspace directory to prevent it from downloading on each start. Also we will have full control over SDKs including it’s cache and versions. It is
init subsection of
tasks. We are downloading Android SDK tools and Flutter tool, also we are upgrading Flutter and Dart SDK to a latest versions and launching Android licenses accepting process.
Pay attention on
cd /workspace/ha_client line. You need to replace
ha_client with your project sources directory name.
Now we are ready to start our Gitpod environment. You can find additional information in Gitpod documentation.
After configured environment start you should be able to use
adb. But our IDE is in the cloud, so it can’t access our USB port. Fortunately
adb can work not only through physical connection but also over the network. All you need is a dedicated IP address, but I think Dynamic DNS will also work.
Connect you Android device via USB cable to any PC, laptop or even Raspberry Pi where you have
adb tcpip 5555 to switch adb on your device to work over the network using port 5555. You can check connection with
adb connect 192.168.1.111:5555 where
192.168.1.111 is your Android device IP address.
To switch your device back to USB debug you need to run
I didn’t check Dynamic DNS solution because my home router has static dedicated IP address. But I assume you need to forward port on your router in both cases. It is better to open some random external port instead of default
5555. For example
39393. So your external
39393 port should be forwarded to your Android device’s IP address and port
There is also a simple solution for network tunneling called
ngrok. Here is a guide to connect to your Android device from Gitpod being on any network, even mobile.
It is also possible to use VPN if your router supports it. But in this case you will need to set up VPN connection on your Gitpod environment as well.
Now you should be able to connect to your device from Gitpod environment console with:
adb connect 220.127.116.11:39393
18.104.22.168 with your router IP address. If connection was successful the only thing left is to run your Flutter application from Gitpod console: