Developing Flutter application in Gitpod and running it on real device

HA Client 0.7.0 will be (or already is) the first HA Client version released from Gitpod environment with some help of Codemagic. Because clouds rules, you know.

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.

Gitpod configuration

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:

It will declare some environment variables and install dependencies needed for building Flutter tool and Flutter applications.

Next we will need a .gitpod.yml file to configure Gitpod IDE:

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.

Launching on real device

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.

Device preparation

Connect you Android device via USB cable to any PC, laptop or even Raspberry Pi where you have adb installed.

Run 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 adb usb.

Network

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 5555.

UPD: VITOR has pointed to very useful tool in comments called ngrok. So 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.

Run

Now you should be able to connect to your device from Gitpod environment console with:

adb connect 101.101.1.1:39393

Replacing 101.101.1.1 with your router IP address. If connection was successful the only thing left is to run your Flutter application from Gitpod console:

flutter run

6 thoughts on “Developing Flutter application in Gitpod and running it on real device”

  1. Hi, I set gitpod.yml, and dockerfile same as sample.

    when i stop gitpod and start again i see this message on terminal.

    itpod /workspace/flutter_demo $ {
    > export PATH=$FLUTTER_HOME/bin:$ANDROID_HOME/bin:$ANDROID_HOME/platform-tools:$PATH
    > mkdir -p /home/gitpod/.android
    > touch /home/gitpod/.android/repositories.cfg
    >
    > } && {
    > flutter pub upgrade
    > echo “Ready to go!”
    > flutter doctor
    >
    > }; HISTFILE=/workspace/.gitpod/cmd-0 history -r
    bash: flutter: command not found
    Ready to go!
    bash: flutter: command not found

    Can u help me? Thanks for your post! its cool!!

    1. So looks like PATH was not updated or flutter was not downloaded.
      First of all you need to archive your current environment and start a new one to try to download flutter once again.

      If this will not help, check if Flutter exist in “/workspace/flutter” directory. You can do this with this commands:

      cd /workspace
      ls

      You should see a list of directories and “flutter” should be there as well.
      If flutter exist, it looks like “before” section of “.gitpod.yml” was not executed. Check if “/home/gitpod/.android/repositories.cfg” file was created. If not, looks like you have a syntax error in your “.gitpod.yml”. Check all indents in that file carefully.

  2. To make our lives easier on the router config, we can use ngrok 😉

    ex.:
    SMARTPHONE_INTERNAL_NETWORK_IP = 192.168.0.10
    SMARTPHONE_INTERNAL_PORT = 5555

    From localhost run: ngrok tcp SMARTPHONE_INTERNAL_NETWORK_IP:SMARTPHONE_INTERNAL_PORT

    From the Gitpod run: adb connect NGROK_GIVEN_ADDRESS:NGROK_GIVEN_PORT(something like tcp://tcp.ngrok.io:port)

  3. [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/[company_or_user_name]/[project_name])

    ## Setup

    “`
    flutter channel master
    flutter config –enable-web
    flutter doctor -v
    “`

    ### Web

    “`
    flutter run -d headless-server
    “`

    ### Mobile

    ###### Feel free to use your own ports configuration

    “`
    SMARTPHONE_INTERNAL_IP = 192.168.0.10
    SMARTPHONE_INTERNAL_PORT = 5555
    “`

    ###### [Localhost command] To switch adb on your device to work over the network using port 5555

    “`
    adb tcpip SMARTPHONE_INTERNAL_PORT
    “`

    ###### [Localhost command] Check connection from localhost

    “`
    adb connect SMARTPHONE_INTERNAL_IP:SMARTPHONE_INTERNAL_PORT
    “`

    ###### [Localhost command] Ngrok tcp forward to your mobile or Forward a chosen port on your router

    “`
    ngrok tcp SMARTPHONE_INTERNAL_IP:SMARTPHONE_INTERNAL_PORT
    “`

    ###### [Gitpod command] Connect from your Gitpod to your localhost for debugging

    “`
    adb connect NGROK_ADDRESS:NGROK_PORT
    flutter run
    “`

    Here my README after this tutorial, Thanks BTW 😉

  4. Pingback: ADB over any network without port forwarding. Even over mobile 3G/4G/LTE. – Some Geeky Website

Leave a Reply

Your email address will not be published. Required fields are marked *