Set Up CI/CD in Flutter Using Codemagic

Where magic happens at every push

Pramish Luitel (Bube)
Feb 13 · 6 min read
Fig. 1. DevOps Architecture (https://www.netsparker.com/devops-security-tools/)

Hello, Flutter developers. It’s been a long time since I’ve posted another piece on mobile app development. This is a new piece on Continous Integration and Continous Deployment (or Delivery)(CI/CD) in Flutter. As we all know, Flutter is an emerging technology for building mobile apps for both Android and iOS. You can look at the Flutter website for more about Flutter for web apps.


When did I come across CI/CD? The answer is when I did advanced software development in my uni. We had a major project (ServiceGo) where we had to set up the whole DevOps pipeline. When I set up the DevOps pipeline, I always was notified in Slack, which I found very interesting. After the complete DevOps setup, I loved the DevOps practice in the software development industry.

Fig. 2. How DevOps work (Image source: Author)

Now, let’s talk about the CI/CD for Flutter. As I searched the internet for information about CI/CD for Flutter, I couldn’t get enough resources to start configuring. I found Fledge for Flutter, but I didn’t like the documentation. (Please correct me if I am wrong.) Then I found Codemagic, which is especially designed for Flutter. It really has good documentation and less configuration for Flutter projects.



How to Set Up a DevOps Pipeline Using Codemagic

Step 1. Install Flutter on your local machine

If you have already installed Flutter on your local machine, then you can skip this step and jump into the second step for creating the Flutter project. To install Flutter on your local machine, please head over to the Flutter official website, select the preferred operating system, and follow the installation steps. The steps are pretty straightforward.

Next is creating the Flutter project.

Fig. 3. Flutter Logo (https://www.youtube.com/channel/UCwXdFgeE9KYzlDdR7TG9cMw)

Step 2. Create the Flutter project on your local machine

If you have already installed Flutter on your local machine, then on the terminal, navigate to your desired folder to create the new project and type flutter create fluttercicd. You can name your project with other names. It will take a couple of minutes to complete the process. After a couple of minutes, our project is ready to start. Note that in Step 1., you have to install the iOS simulator or Android Emulator and also configure the preferred text editor with Flutter. When the process is completed, open the project in your preferred text editor and start running the app on any virtual device (iOS simulator or Android Emulator).

Step 3. Create the new repo in Github

Navigate to GitHub’s official page and create a new repo for this project. We’ll also set up the newly created GitHub repo on our local machine. Creating a new repo is pretty easy, so I’ll show you how to set up the repo on our local machine. The following code would be beneficial to set up the repo.

git init git add .git commit -m "write your first commit messages"git remote add origin 'remote url'git push -u origin master

By doing this, you can see your latest code in your GitHub repo.

Step 4. is optional. If you don’t want to write some Flutter code, then you can jump into Step 5.

Step 4. Write some Flutter code for building the UI

Although configuring the CI/CD pipelines does not require that you build the UI, I prefer building some UI and pushing it to GitHub. The code for our simple UI goes like this:

import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text('Welcome to Flutter CI/CD Demo'),),body: Center(child: Text('Hello World'),),),);}
}

If you want to learn about Dart then, please see the Dart dev site. There is an article that teaches you the easiest way to understand the Dart language, which Flutter uses.

Step 5. Set up the account in Codemagic

For building the pipeline for our Flutter project, we’re using Codemagic, whose name suggests magic and does show us magic after we push some code to GitHub. We can sign in to Codemagic using GitHub, GitLab, or BitBucket. I am going to use GitHub.

Fig. 4. Option to sign in to Codemagic (https://codemagic.io/signup)

Upon clicking on ‘Join using GitHub’, you’ll be prompted to sign in to your GitHub account. Enter the credentials and you will be redirected to the home page of Codemagic, which looks like this.

Fig. 5. Dashboard of Codemagic (https://codemagic.io/apps)

You have to select or search the preferred git repo for configuring the CI/CD pipeline and select the beautiful ‘Start new build’ button.

You’ll see the beautiful dialog box to specify the branch and the virtual machine. Point the branch to Master as the master branch is ready for deployment. Leave the workflow as it is and select ‘Start new Build’ to start building the Flutter app.

You’ll see another window where you can see the build processes are running.

Fig. 6. Running the build for Flutter app (https://codemagic.io/app/5e4342e878accc4ce55ff639).

We want this build to run automatically. To build the Flutter app upon pushing code to the master, you have to make some changes to your code and push it to the master branch. As soon as you push your code, Codemagic triggers the build settings and starts building the project. The next step is to make some changes to our main.dart file.

Step 6. Make some changes to our main.dart file

Let’s start making some changes to our code. I have added a RaisedButton widget.

Delete the Center widget and add the RaisedButton widget:

RaisedButton(padding: EdgeInsets.all(20),onPressed: () {print("Raised Button is pressed");},child: Text("Press Me!!"),

The complete code looks like this:

import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text('Welcome to Flutter CI/CD Demo'),),body: RaisedButton(padding: EdgeInsets.all(20),onPressed: () {print("Raised Button is pressed");},child: Text("Press Me!!"),),),);}}

Open up the terminal and navigate to the project workspace, and the code is ready to push it to the master branch.

The code for pushing to the GitHub repo is:

git add . //This adds all the changed files and folders to the staging area.
git commit -m "add a raised button widget." //Specifying the git commit message before pushing.
git push //this will directly push your changes to your master branch.

After pushing your code into the GitHub repo, it’s time to see the magic on the Codemagic website.

Step 7. Start viewing the magic happening in the Codemagic website

As soon as we push our code into GitHub, Codemagic triggers the build and start building the Flutter project. It will take some time to build the project.

Fig. 7. Build starting in the Codemagic website. (https://codemagic.io/app/5e4342e878accc4ce55ff639/build/5e444949000fe000097a6637)

When the process is complete, you will get an email saying that the newest version has been released into your registered GitHub email account. This is an awesome feature and I loved it.

Fig. 8. Email notification sent by Codemagic in my email

Hurrah! We’ve set up the CI/CD pipeline for our Flutter project. This is just the beginning of setting up the CI/CD pipeline.

In the next piece, I’ll show how we write our first tests in Flutter, pass the test in Code Magic, and be ready to deploy from the master branch. Stay tuned.

The link to the GitHub project is: Flutter CI/CD Pipeline.

Never forget: Never stop learning because this will help you in many fields.


Thanks for reading! Have a nice day.

Better Programming

Advice for programmers.

Pramish Luitel (Bube)

Written by

https://www.pramishluitel.me Software Developer, Technology Enthusiast.

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade