Editing Flutter Packages in Codemagic

There are times when we may have to edit packages downloaded by flutter, maybe to add a new functionality or customize the style etc. In this article we will take a look at how to use a package that we have edited manually, in codemagic.

Tools Required

• VNC viewer, which can be downloaded from here 

Setup Codemagic

While configuring the codemagic build steps. Under “Dependency caching”, check “Enable dependency caching” option and add the following path “$HOME/programs/flutter/.pub-cache/” you may add the the entire pubcache folder if you wish ( ie., $HOME/programs/flutter/.pub-cache). But this is not the $HOME/.pub-cache mentioned in the documentation. And now specify the build and publish options as usual. when you click on "Start new build" make sure you check on the "Enable remote access" checkbox and start the build process.

Connecting to the Machine

After the process starts in a few seconds codemagic will display the SSH command as well as the details required to connect via VNC. Open up the VNC Viewer program we downloaded earlier and in the field where it asks for "VNC server address" enter the ip address of the machine followed by the port number (for example, 192.xxx.xxx.xxx:10000, note the colon separating the ip and the port).And then click "connect to the host name option". It will show an insecure connection warning just click continue. Enter the username and password and click ok. And you will be able to see the desktop of the build machine.

Making the changes

Once you have access to the mac. Click on the finder app and click on “Go” and “go to folder” enter “/Users/builder/programs/flutter” and open that folder. Now click Left Alt+Shift+dot to show hidden folders. Then open the .pub-cache folder and move to the folder containing your package. You can right click the dart files and open them with Android Studio. Make your changes and save them (save changes often). I couldn’t find a way to send the files from local to remote machine but you should be able to upload it on some file-sharing site and download it there.

Note: In case the current build got finished before you made the changes. The changes won’t be reflected in the build. But since the folder will be cached for the next build. You can just build it again.

Limitation

• The connection will be terminated 20 minutes after the build completes. So we should complete everything before the 20 minute window runs out.