Coverage viewer

pub package License: MIT

A beautiful and modern web-based coverage report viewer for Dart and Flutter projects. Transform your LCOV coverage reports into an interactive, hierarchical visualization with search capabilities and detailed line-by-line analysis.

Demo:

Demo coverage viewer home Demo coverage viewer detail

Features

  • Interactive web interface - Browse coverage reports in your browser with a modern, responsive design
  • Hierarchical folder structure - Navigate through your project structure with expandable/collapsible folders
  • Search functionality - Quickly find files with instant search filtering
  • Color-coded coverage - Visual indicators for coverage levels (green ≥80%, orange 60-79%, red <60%)
  • Line-by-line details - See exactly which lines are covered, not covered, or not tracked
  • Cross-platform - Works on Windows, macOS, and Linux
  • Auto-launch browser - Automatically opens the report in your default browser

Installation

dart pub global activate coverage_viewer

Or as a dev dependency

Add to your pubspec.yaml:

dev_dependencies:
  coverage_viewer: ^0.0.1

Then run:

dart pub get

Usage

For Flutter projects

# Generate coverage
flutter test --coverage

# View coverage report
coverage_viewer

For Dart projects

# Generate coverage
dart test --coverage=coverage

# Convert to LCOV format
dart run coverage:format_coverage --lcov --in=coverage --out=coverage/lcov.info --packages=.dart_tool/package_config.json --report-on=lib

# View coverage report
coverage_viewer

Custom options

# Custom input file
coverage_viewer --input path/to/custom.lcov

# Custom port
coverage_viewer --port 9000

# Combined options
_coverage_viewer --input coverage/lcov.info --port 3000

# Show help
coverage_viewer --help

As a dev dependency

If installed as a dev dependency, run it with:

dart run coverage_viewer

Command Line Options

Option Short Default Description
--input -i coverage/lcov.info Path to LCOV coverage file
--port -p 8080 Port for the web server
--help -h - Show usage information

Programmatic usage

You can also use the package programmatically in your Dart code:

import 'package:coverage_viewer/coverage_viewer.dart';
import 'dart:io';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final content = await rootBundle.loadString('coverage/lcov.info');
  
  // Parse coverage
  final viewer = CoverageViewer();
  final report = viewer.parseLcov(content);
  
  // Print statistics
  print('Total files: ${report.files.length}');
  print('Coverage: ${report.coveragePercent.toStringAsFixed(1)}%');
  print('Lines covered: ${report.coveredLines}/${report.totalLines}');
}

Interface Features

Main View

  • Total Coverage - Overall coverage percentage with color indicator
  • Lines Covered - Fraction of covered lines
  • File Count - Number of tracked files
  • Search Bar - Filter files by name or path
  • Collapse All - Button to collapse all folder trees
  • Folder Tree - Hierarchical view of your project structure

File Detail View

  • Back Navigation - Return to overview while preserving folder state
  • Coverage Percentage - File-specific coverage
  • Line Numbers - Every line numbered for easy reference
  • Hit Counts - Number of times each line was executed
  • Color Coding:
    • Green background: Covered lines
    • Red background: Uncovered lines
    • White background: Lines not tracked for coverage

Requirements

  • Dart SDK ≥3.0.0
  • A generated LCOV coverage file

Platform Support

Platform Supported Auto-launch Browser
Windows ✓ ✓
macOS ✓ ✓
Linux ✓ ✓

Example output

When you run coverage_viewer, you'll see:

Reading coverage from: coverage/lcov.info
Total files: 42
Starting server on http://localhost:8080
Press Ctrl+C to stop

The web interface will automatically open in your default browser.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add some amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

Development

# Clone the repository
git clone https://github.com/jorgemvv01/coverage_viewer.git
cd coverage_viewer

# Install dependencies
dart pub get

# Run tests
dart test

# Run analyzer
dart analyze

# Format code
dart format .

License

This project is licensed under the MIT License - see the LICENSE file for details.

Changelog

See CHANGELOG.md for a list of changes.

Author

Jorge Villarreal

Support

If you find this package useful, please consider:

  • Giving it a star on GitHub
  • Filing issues and feature requests
  • Contributing to the codebase

Libraries

coverage_viewer