Flutter: Comparing Flutter project vs Flutter module on Codemagic

In this article, I will be showing what changes you have to introduce in order to build and test Flutter modules in comparison to Flutter projects on Codemagic.

First of all, I will go through some of the differences between the Flutter project and the Flutter module.

Creating Flutter project

Flutter project can be created in any directory using the command:

flutter create project_name

If you require AndroidX support just include the --androidx flag while creating the project.

flutter create --androidx project_name

Replace the project_name with the name of your Flutter project.

Creating Flutter module

You should always create a Flutter module outside of the Android / iOS native project directory. It is a good practice to create a Root project directory containing both the Native project folder and the Flutter module folder.

You can run the following command from the root project folder in order to create a new Flutter module:

flutter create -t module name_of_module

If you require AndroidX support just include the --androidx flag while creating the module.

flutter create -t module --androidx name_of_module

Replace the name_of_module with the name you want to give to this Flutter module.

A detailed guide on how to use a Flutter module with your native Android project is available at this link.

Comparison between project and module directory

If you take a close look at both the directories created for the Flutter project and the Flutter module, you will see some differences.

The main difference is that the Flutter project directory contains:

• android Folder
• ios Folder

But the Flutter module directory contains:

• .android Folder
• .ios Folder

There is a dot (.) present in front of these folder names so that there is no conflict while importing the Flutter module in the Android or iOS native project.

Building on Codemagic

While you can build your Flutter projects directly from the Codemagic UI, you will not be able to build your Flutter modules with the native Android or iOS code with the Default Codemagic UI settings.

But, with the introduction of the Codemagic YAML, this process has become as simple as running your CLI commands in a CI/CD tool.

One of the Limitations of Codemagic YAML (beta):

Only Android and web app configuration can be exported. The commands for building and code signing iOS apps are currently not generated and you cannot configure iOS publishing in YAML yet.

1. First of all, commit the project to git and push it to GitHub. In the case of a native Android project with Flutter module, make sure that you push the root project folder containing both the native project and the flutter module.
2. Login to the Codemagic UI and search for your project in the Applications dashboard.

3. Go to the Settings.

4. From the Advanced configuration (beta) tab, you can download the codemagic.yaml file.

5. Now, you can open this codemagic.yaml file in any code editor and make changes.

Whether it is a Flutter project or module, add the following line at the beginning of the scripts, to avoid any conflict if there is already a debug.keystorepresent.

rm -f ~/.android/debug.keystore

So, with the above line, we are deleting any previously present debug.keystore file and generating a new one for the current build.

For the normal Flutter projects, you can directly use this codemagic.yaml file. But, in order to build Flutter modules, you have to make some modifications to the file.

Building and testing Flutter projects

For building Flutter projects on Codemagic using the codemagic.yaml file you can place the YAML file in root Flutter project directory and push it to the GitHub repo.

The complete YAML file will look like this:

Then, from the Codemagic UI, you will have to Start new build by selecting the workflow from codemagic.yaml file.

Building and testing Flutter modules

For building Flutter modules on Codemagic using the codemagic.yaml file you have to make the following changes.

The codemagic.yaml file has to be placed in the root project directory containing both the native Android project folder as well as the Flutter module folder.

But in order to run flutter commands we need to be inside the Flutter module folder.

So, we have to run make the following changes to the script & artifacts:

1. Replace this line:

- flutter packages pub get

with this line:

- cd $FCI_BUILD_DIR/counter_flutter && flutter test

Replace the project_name with the name of the project.

2. Replace this line:

- flutter test

with this line:

- cd $FCI_BUILD_DIR/counter_flutter && flutter test

3. In case of the Flutter module, we only need to build the Android project and the Flutter module will get built along with it as it is imported in the android project.

To start building the android project we have to be inside the Android project folder.

So, we need to replace this line:

- flutter build apk --debug

with this line:

- cd $FCI_BUILD_DIR/android_project_name && ./gradlew assembleDebug

Replace the android_project_name with your Android project folder name.

4. The .apk file will be generated in the Android project folder. So, we have to retrieve the apk from there.

The last change that we have to make is, in the artifacts, we have to replace this line:

- build/**/outputs/**/*.apk

with this line:

- android_project_name/app/build/**/outputs/**/*.apk

Replace the android_project_name with your Android project folder name.

After making all the required changes, place the codemagic.yaml file in the root project directory and push it to the GitHub repo.

You can now use this YAML file from the Codemagic UI.

The complete YAML file will look like this:

Conclusion

The Codemagic YAML makes it possible for us to specify any CLI commands using the codemagic.yaml file and run them directly on the Codemagic CI/CD platform. This makes it a lot easier to build and test native projects on Codemagic.

Check out my other articles

Flutter: Adding Flutter module to native Android project and Testing it on Codemagic

Flutter: Implementing Google Sign In

Flutter: Building WearOS app

If you want to support me and want me to continue writing Flutter articles and building some interesting Flutter projects, please contribute to my Patreon page below:

Souvik Biswas is creating Flutter Apps | Patreon

You can follow me on Twitter and find some of my projects on GitHub. Also, don’t forget to checkout my Website. Thank you for reading, if you enjoyed the article make sure to show me some love by hitting that clap (👏) button!

Happy coding…

Souvik Biswas

Flutter Community