Home
|
Blog
|
How to setup CI/CD for Flutter apps with GitHub Actions

How to setup CI/CD for Flutter apps with GitHub Actions

December 9, 2019
by Nazar Cybulskij

The development process contains two things that seem disparate but are actually related.

Here’s the first one. Genuine software engineers don’t think about money. They long to be creative and see the immediate results of their creativity without facing any issues.

Your company’s goal is to get more money and cut down the time frames required for the product to appear on the market. Frankly speaking, fast development of the minimum viable product and immediate updates of the existing projects are your business’s biggest dreams. And that’s the second one.

This guide contains both, theory and practice.

Theoretical side

Of course you cannot please everybody, however, CI/CD (Continuous Integration/Continuous Delivery) breaks the rules. This simple idea belongs to IT pioneer, Grady Booch. Can you imagine your colleague running from department to department with a floppy disk three times a day to introduce CI? That’s how challenging it was to implement CI in 1991. Today, things look way less complicated.

The main purpose of CI/CD is a continuous merge of working copies into the main development branch and frequent project build execution for a discovery of potential bugs and resolution of integration problems.

the cost of sofware bugs

The faster you find a bug, the less you pay for it. Sometimes the price is too high, like with Mariner 1 and Therac 25.

What are the benefits of CI for a business?

1. Efficient Developers

By incorporating CI, development team becomes more bankable and the cost of your software projects minimizes. CI aims at refining the integration process, thus breaking it down into simple, daily development tasks, to help minimize the build costs and detect defects early in the software lifecycle.

2. Faster Software Builds

Infrastructure and deployment are automated. Everyone loves to see the output of their work, developers especially, and the business gets to see the benefits of this code right away. Deploying a smaller patch of code is less risky when developers can take advantage of test automation, so they have less overhead and coordination with a QA team.

3. Focus on solving business problems

Dev-ops team must support pipeline development, as it helps developers to focus on solving business problems, without thinking about infrastructure deployment.

Let’s move on to practice.

Practical side

inVerita Flutter developers are experienced in working with such CI systems as Jenkins, Circle IO, Bitrase and Gitlab CI. As we have a Github projects code store, it’s better to integrate CI into Github rather than any other third party service.

Github Actions is a new feature of Github that enables users to create a CI/CD system directly in Github repository. Developers and Dev-ops can write individual tasks, called actions, and combine them to create a custom workflow. It gives us the possibility to build our app, fast test our application and publish them. The best thing is that you can do this inside Github site, avoiding third-party websites.

Github private repositories usually offer a free plan of 2000 build minutes a month. We usually use 1800 build minutes a month for both middle-sized and big projects.

Now, let’s talk about the steps needed for the integration of the CI/CD workflow for a Flutter app.

1) Create Github Project

For example, you have a standard Flutter Counter App.

create github project

Then, add Flutter integration tests, unit tests and widgets tests to the project.

widgets test Widgets test

integration test Integration test (UI tests)

2) Add workflow file

In the root folder of your Flutter project, create a new folder .github and a subfolder workflows. This is where your workflow .yml or .yaml extension files will reside (on example we provide it’s main.yaml)

A project can have multiple workflow files, but for simplicity, we recommend using only one file for this project.

3) Writing Commands

We’ve tried to explain every line of the file with comments. If you need more information about a syntax for Github Actions, check it out here.

Run unit and widgets tests job Run unit and widgets tests job

We integrated CodeCov to automatically generate beautiful reports from CI.

Here’s how the reports look like:

CI report 1 CI report #1

CI report CI report #2

CI report 2 CI report #3

run integrated test ios job Run integrated tests iOS job

Run integrated tests android job Run integrated tests android job

Build and deploy job Build and deploy job

Recommendations on how to improve workflow. We recommend adding personal notifications for developers in messengers like Slack, Telegram or WeChat, as it helps quickly provide some help if needed.

See the workflow and release in Github

Once you have pushed the code you can see the workflow in action by __going to repo URL/actions __.

workflow release github

You see the release files by going to repo URL/releases.

workflow flutter

Your site will be published yourusername .github.io. Here’s an example.

flutter app sample

Now you have a beautiful desktop application.

flutter demo home page

The full code is here.

Great article about run flutter driver test on github actions

About GitHub Actions doc

Flutter testing

Afterword

We believe that in many cases CI/CD improves code quality and allows receiving first-rate product quicker than other approaches.

When the one should use CI/CD? We recommend using it whenever you start developing from scratch, also for web, mobile and ecommerce projects, different projects with microservice architecture, various front-end and middleware components. In case you have monolithic IT systems and you’d like to integrate CI/CD into the development process, think twice, because you will have to rebuild the architecture according to the new requirements. It is more likely, you won’t benefit from CI when making improvements in your old code, but you will definitely win if you use it for a new project.

If you stuck with your Flutter app development, contact inVerita.


COMMENTS
It`s all about People
151 New Park Ave, Hartford, CT 06106
Lviv 102, Ivan Franko str
Ivano-Frankivsk 34, Sakharova Str
Follow us