Static Code Analysis with SonarQube with Flutter

Introduction

SonarQube is a popular open-source platform for continuous inspection of code quality to perform automatic reviews with static analysis of code to detect bugs, code smells, and security vulnerabilities.

SonarQube’s official support for analyzing Flutter projects might have been limited or nonexistent since Flutter is based on the Dart programming language, which wasn’t one of the languages initially supported by SonarQube.

However, it’s possible that there have been developments or third-party integrations since then. Below are the general steps you would follow to set up SonarQube with a Flutter project in a Docker environment.

Step 1: Install Docker Desktop

Go to Docker Desktop link.

In my case, the downloaded version will be the Mac with an Apple chip. after downloading just move the docker app to the Applications folder like the image below:

When the installation process is done you have to open the docker application and probably should see something like:

Step 2: Download SonarQube

Go to SonarQube link.

Scroll down until you see the AVAILABLE FROM DOCKERHUB button.Click on that button then you see this page:

we will use the community edition. because this is open source and enough for this tutorial.

Open the terminal and paste this command:

docker pull sonarqube:10.1.0-community

With the image downloaded, we go back to Docker and in the Images option we can see that like:

You can also check this in the terminal using this command:

docker images

and this will look like this:

you will notice that now we have a container created with the SonarQube image, now just run the container to start the software, for that, we can just click the start button in the container created or just type docker start sonarqubeapp in the terminal, where sonarquebeapp should be the name of the container.

While the container is opening you can open your browser and type http://localhost:9000/, after starting you will be able to see the login page:

By default to log in for the first time, just type admin in the login and password fields, you will be redirected to the home page and will see that:

Dart and Flutter are not supported officially by SonarQube yet, so for that reason, we need to download a plug-in that will do the work we need.

Step 3: Download SonarQube plugin

Open this repository and and go to releases page to download the last version.

after downloading the jar file , move the jar file to Docker container by using this command:

docker cp sonar-flutter-plugin-0.4.0.jar sonarqubeapp:/opt/sonarqube/extensions/plugins

now restart SonarQube,

docker restart sonarqubeapp and wait for it.

Log in again and to check if the plug-in was correctly installed click on the administration tab, later click on the Marketplace tab inside the admin options, and finally in Plugins click on Installed to see the page like:

Step 4: Download Sonar Scanner

Go to the link and download Sonar Scanner. to show report locally.

I recommended to do that in your home folder.

Now you will have to add the path in your .bash_profile or .zshrc (or in environment variables in windows), it depends on what kind of terminal you use, type: export PATH="$HOME/sonar-scanner-4.7.0.2747-macosx/bin:$PATH".

Step 5: Create sonar-project.properties file in your root project

after cratering that file paste this line of code

# Project identification, either hardcode it or use Environment variables
sonar.projectKey=my project key
sonar.projectName=my project name
sonar.login=token

# The host URL
sonar.host.url=http://localhost:9000

# Source code location.
# Path is relative to the sonar-project.properties file. Defaults to .
# Use commas to specify more than one folder.
sonar.sources=lib
sonar.tests=test

# Encoding of the source code. Default is default system encoding.
sonar.sourceEncoding=UTF-8

# exclude generated files
sonar.exclusions=test/**/*_test.mocks.dart,lib/**/*.g.dart

With this file created, go back to the SonarQube home page, and let’s create a project manually, to do that just click on the Button Add Project and then click the Manually option.

Next, we give a project key and a display name to the project and click on the setup button, next page the Sonar will ask you to generate a token, so create a name for your token and click on generate, this will show you a token, you need to copy and go back to sonar-project.properties file and fill the project key, projectName and token with what was provided.

Run this command in the project root directory’s terminal to generate the report.

flutter test --machine --coverage > tests.output
sonar-scanner

When finishing this, you can refresh your SonarQube page to see the app insights:

Done!