How to Generate and Analyze a Flutter Test Coverage Report in VSCode

If you're writing non-trivial apps, adding automated tests is one of the best investments you can make.

Automated tests help you write better code, catch regressions early, and refactor confidently. They even save you a lot of time compared to testing your app manually, over and over. 😱

And with Flutter, it is easy to generate and visualize test coverage for your entire app or package, all the way down to each line of code in your project.

So in this article we'll learn how to:

Ready? Let's get started!

The Flutter test --coverage command

Suppose you have written some tests and want to get an idea of test coverage in your project.

All you have to do is to run these three commands:

# Generate `coverage/` file flutter test --coverage # Generate HTML report # Note: on macOS you need to have lcov installed on your system (`brew install lcov`) to use this: genhtml coverage/ -o coverage/html # Open the report open coverage/html/index.html

The generated HTML report will create a lot of files. To avoid checking them in to git, add coverage/ to your .gitignore file.

This will generate the report and open a page on your browser that looks like this:

LCOV code coverage report for the entire project
LCOV code coverage report for the entire project

From here, you can drill into each directory and open each file individually. Example:

LCOV code coverage report for a single file
LCOV code coverage report for a single file

What's nice about the file report is that all relevant lines are color-coded (blue: covered, red: not covered).

Note that the report tells you if there are tests that cover a given line, not if those tests pass or not. In other words, you still have to ensure all your tests pass.

While this report is helpful, during development it's not practical to read it in the browser.

Luckily, there are two VSCode extensions to make life easier.

The Flutter Coverage Extension

Once you have installed the Flutter Coverage extension, it will appear in your testing tab and show you the coverage info for all files and folders:

Flutter test coverage panel in VSCode
Flutter test coverage panel in VSCode

Based on the coverage percentage, you'll also get three different icons showing you which parts of your code need more tests:

  • ✅ over 70% coverage
  • ⚠️ between 50% and 70% coverage
  • ❌ below 50% coverage

But what if you wanted to see test coverage in the code editor itself?

The Coverage Gutters Extension

Once you install the Coverage Gutters Extension, a little Watch button will appear in the bottom bar:

Coverage Gutters: click to watch
Coverage Gutters: click to watch

If you click on it, it will check the test coverage info (in the file), and you'll see green or red gutters next to each line in the editor:

Coverage gutters in the code editor
Coverage gutters in the code editor

This is great as it tells you exactly which parts of your code are not covered on a line-by-line basis! 👍

Note that both the Flutter Coverage and Coverage Gutters use the file to show the coverage data. So you should re-run flutter test --coverage after making changes to see the updated data.

When used together, Flutter Coverage and Coverage Gutters help you see which parts of your code need more tests.

They make writing tests more fun and rewarding, too, since getting coverage to 100% feels good! ✅


Now that we know how to generate test coverage and make the most of the available VSCode extensions, there is one thing left to say:

Code coverage alone is not a silver bullet.

Writing tests takes time (though not nearly as much as testing the entire app manually, over and over 😱), so we should choose a testing strategy that makes sense.

A good combination of unit, widget, and integration tests can be most effective. And depending on the project, it may make sense to include E2E and golden image tests too.

Flutter Foundations Course Now Available

I launched a brand new course that covers automated testing in great depth, along with other important topics like state management, app architecture, navigation, and much more:

Want More?

Invest in yourself with my high-quality Flutter courses.

Flutter & Firebase Masterclass

Flutter & Firebase Masterclass

Learn about Firebase Auth, Cloud Firestore, Cloud Functions, Stripe payments, and much more by building a full-stack eCommerce app with Flutter & Firebase.

The Complete Dart Developer Guide

The Complete Dart Developer Guide

Learn Dart Programming in depth. Includes: basic to advanced topics, exercises, and projects. Fully updated to Dart 2.15.

Flutter Animations Masterclass

Flutter Animations Masterclass

Master Flutter animations and build a completely custom habit tracking application.