Simple Guide to Deploy and Test Flutter Apps With Codemagic And Firebase

Have you ever wanted to share your app build with a client or a group of testers, to view the progress of your app on a feature that has been completed?

That is where CI/CD comes in.

CI and CD stand for continuous integration and continuous delivery/continuous deployment. In very simple terms, CI is a modern software development practice in which incremental code changes are made frequently and reliably. Automated build-and-test steps triggered by CI ensure that code changes being merged into the repository are reliable. The code is then delivered quickly and seamlessly as a part of the CD process.

Instead of manually bundling and building your app every time you need to share a working APK file, you can automatically send updates to your testers with a one-time setup on Codemagic and Google Firebase app distribution.

In this post, I will guide you on how to deploy and test your Flutter apps on a physical device with Codemagic and Firebase app distribution. The steps include:

1. Add a project to Firebase.
2. Add Firebase to your Android app.
3. Enable Firebase app distribution and add testers.
4. Host your Flutter project on GitHub or Bitbucket.
5. Connect the project repository and add an application to Codemagic.
6. Setup Codemagic workflow and connect Firebase.

6 Simple Steps to Deploy Flutter Apps With Codemagic and Firebase App Distribution

Step #1: Add Project to Firebase

Use your Google account to sign in to the Firebase Console.

Click on "Add Project"

Give a name to your project. And click continue

Disable "Google Analytics for this project". And click "Create project".

Once finished setting up, click on "Continue".

You'll be redirected to your Firebase project dashboard, where you can add any platform-specific app to your project.

In this article, we will focus on testing with only a physical Android device.

Click on the Android icon, to add an Android app.

Step #2: Add Firebase to Your Android App

To register your app on Firebase, you need to add your Android app package name (Your package name is generally the applicationId in your app-level build.gradle file).

This can be found in your Flutter project folder > android > app > build.gradle

Click on the "Register App" button after adding it.

Next, click on the download button, to download the "google-services.json" config file. Make sure there is no mistake when saving the name of this file.

Once download is complete, move the config file into the Flutter project folder > android > app

Then click "Next".

To make the google-services.json config values accessible to Firebase SDKs, you need the Google Services Gradle plugin.

Add the plugin as a buildscript dependency to your project-level build.gradle file: Flutter project folder > android > build.gradle

classpath 'com.google.gms:google-services:4.3.15'

Then, in your module (app-level) build.gradle file, add both the google-services plugin and any Firebase SDKs that you want to use in your app: Flutter project folder > android > app > build.gradle

Add the Google services gradle plugin.

apply plugin: 'com.google.gms.google-services'

Import the Firebase BoM.

implementation platform('com.google.firebase:firebase-bom:31.5.0')

And finally, click Next.

You're all set. Click the "Continue to console" button.

Step #3: Enable Firebase App Distribution and Add Testers

To distribute your apps to users/testers for them to install on their mobile phones, you need to set up the app distribution feature in Firebase.

Select "All products" in the sidebar menu of your Firebase console. Under the "Release & Monitor" section, click on the "App Distribution" card.

Click on the "Get Started" button.

Switch to the "Testers & Groups" tab.

Create a group for your testers to add to Codemagic. Click the "Add group" button to create a new group.

Enter the group name as "android_testers", and click save.

Then click the "Add tester" button to add a new tester's email. This email should be an accessible email, where they can receive updates and notifications of any new version release of your app.

And you're done setting up App Distribution on Firebase.

Step #4: Host Your Flutter Project on GitHub

You need to host your project, to an online repository. This would make it easier to trigger an app build when you push your changes from your local workspace to the online repository or when you merge with a specific branch automatically in Codemagic.

Click here to learn how you can push a Flutter project to your GitHub repository.

Step #5: Connect the Repository and Add an Application to Codemagic

Sign up to Codemagic if you don't have an account.

On the dashboard, click on the "Add application" button.

On the new pop-up dialog shown, select GitHub (if GitHub is where your Flutter project is hosted). Click "Next" to select a repository.

A list of your repositories in your connected GitHub account would be displayed in the dropdown bar. Select the repository in which the app you want to test is in.

Select The "Flutter App" workflow option. And Click "Finish" to add an application.

N.B: If you can't find your repository, or find it difficult to connect your GitHub account, check here to view your integration settings, or if Codemagic is installed in your GitHub account.

Step #6: Setup Codemagic Workflow and Connect Firebase

Double-click the workflow name to edit. Rename the workflow to "Firebase App Distribution".

Select only the Android platform under the "Build for platforms" section.

Scroll down, and click on the "Build triggers" bar to set up which triggers should run a new app build.

Select the checkbox: "Trigger on push".

Enter the name of the branch you want to be watched, and click "Add Pattern".

After that, scroll down to the "Build" bar section.

All you need to do here is select "Android app bundle and universal APK" as your Android build format.

Switch the Mode to "Release".

Then, navigate to the "Distribution" bar section.

Inside, open the "Android code signing" section.

Check the box to enable Android code signing.

Choose or drop your keystore.jks file to the Keystore input section. Provide your Keystore password, Key alias and Key password details in the appropriate input fields.

Once done, Click on "Save changes" at the top navigation bar.

If you don't have the above keystore details, follow these steps to generate a keystore.jks file for your developing device:

A. Create a file called key.properties in the Android directory, at the same level as local.properties. Inside, copy and paste the following four lines of code and adjust according to your wants.
storePassword and keyPassword are usually the same. the value for storeFile can change to wherever you put your keystore in the next step.

storePassword=pw
keyPassword=pw
keyAlias=upload
storeFile=../app/upload-keystore.jks

B. Generate the key.

This section is divided into two, depending on whether your developing device is Windows or Mac.

Windows
Copy and adjust the following code to your appropriate directories. Run it on cmd. The first address is where your java keytool lies, and the second address after -keystore is where you want to download the key, as well as its name.

C:\\"Program Files"\Android\\"Android Studio"\jre\bin\keytool -genkeypair -v -keystore C:\Users\Administrator\upload-keystore.jks -storetype JKS -keyalg RSA -keysize 2048 -validity 10000 -alias upload

Mac
It's easier for Mac users since you can simply just copy and paste the following code to the terminal and you're set.

keytool -genkey -v -keystore ~/upload-keystore.jks -keyalg RSA -keysize 2048 -validity 10000 -alias upload

The next thing I would suggest you do is to move the key to where your app resides: inside android > app.

N.B: You don't need to repeat these steps for every app you want to connect to Codemagic. You can always use the same keystore.jks file and password details in the Android code signing section.

Next, navigate to the "Firebase App Distribution" bar section:

Check the box to enable publishing to Firebase App Distribution. Select "Firebase token" as the authentication method.

Provide your Firebase token:

To generate a Firebase token for your developing device, follow the following steps:

If you don't have Firebase CLI already installed, follow this guide. Else continue with the next steps.

Open your terminal or CMD(for Windows user)

Start the sign-in process by running the following command:

firebase login:ci

This will redirect you to your browser, to authenticate your Google account or Visit the URL provided in the terminal, then log in using a Google account.

Click "Allow" to grant Firebase the necessary permissions needed.

Now, go back to your terminal. You should see a success notification with your Firebase Token. (You can save this token in a safe place to be used for other apps. Instead of re-generating a new one).

Provide your Android Firebase app ID:

This can be gotten from your Firebase console dashboard.

Select the added Android app on the Firebase console to view the app details.

Here is where you would find your Firebase App ID. Copy and paste it into the appropriate input field in Codemagic.

In the "Tester groups for Android app" input field, enter "android_testers" (Same as the group name created in Firebase App Distribution).

Once done, Click on "Save changes" at the top navigation bar.

And now, the setup is complete!!

Finally, click the "Start build" button to start your first app build. You won't need to do this later on, as when you make a push to your repository on Github, it triggers this process automatically.

With all set up properly, your testers would get an email notification instructing them to accept and install the app on their Android mobile device.

Conclusion

Deploying flutter apps to test on a physical mobile device with Codemagic is a very straightforward process.

Your workflow is set and all the triggers are in place when you push code from your local workspace or code editor.

This starts building your app. Then when done delivers and deploys to all added testers or clients through the preset channels.

If you like this article, kindly follow me on Linkedin to receive more helpful tips about Flutter.

Lastly, don't forget to share on other social platforms. Good luck!