chord_diagrams #

Guitar and ukulele chord diagrams for Flutter — just pass a chord name like G, Em7, or Dsus4 and get a rendered diagram. Built-in renderer, no external dependencies needed.

Features #

• 1000+ chord entries: 529 guitar and 547 ukulele, each with multiple voicings.
• Fast native C++ core for chord parsing, voicing selection, and SVG generation.
• Ready-to-use ChordDiagram widget with built-in SVG renderer.
• Query available notes and suffixes for chord pickers.
• All platforms: Android, iOS, macOS, Windows, Linux, and Web.

Screenshots #

Guitar — G (4 voicings)

Ukulele — G (4 voicings)

Installation #

Add the package to your pubspec.yaml:

dependencies:
  chord_diagrams: ^0.7.0

Then install dependencies:

flutter pub get

Quick Start #

Call await ChordDiagrams.ensureInitialized() once before using the package. On native platforms this is effectively instant. On web it loads the WASM module.

If you just want to show a diagram in Flutter, use ChordDiagram. The SVG rendering is already handled by this package.

import 'package:flutter/material.dart';
import 'package:chord_diagrams/chord_diagrams.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await ChordDiagrams.ensureInitialized();

  runApp(const MaterialApp(
    home: Scaffold(
      body: Center(
        // Built-in renderer, no extra dependencies needed.
        // position: voicing index (0 = most common).
        // Use ChordDiagrams.getPositionCount('G') to get the total.
        child: ChordDiagram(
          chord: 'G',
          instrument: Instrument.guitar,
          position: 0,
          width: 300, // height is derived automatically
        ),
      ),
    ),
  ));
}

Build A Chord Picker #

Query the catalog to drive note and suffix selectors:

await ChordDiagrams.ensureInitialized();

final notes = ChordDiagrams.getNotes();
// ['C', 'C#', 'D', 'Eb', 'E', 'F', 'F#', 'G', 'Ab', 'A', 'Bb', 'B']

final suffixes = ChordDiagrams.getSuffixes('C');
// ['', 'm', '7', 'm7', 'maj7', '6', 'm6', 'sus2', ...]

final positions = ChordDiagrams.getPositionCount('Cmaj7');
// e.g. 4

position is a zero-based voicing index. 0 is usually the most common open or low-fret shape; higher positions move up the neck.

Enharmonic equivalents resolve automatically. For example, ChordDiagrams.guitar('Gb') returns the F# voicing while preserving "Gb" in the rendered title.

Supported enharmonic pairs: C#/Db, D#/Eb, F#/Gb, G#/Ab, A#/Bb.

Styling #

Customize colors and visibility globally. Changes apply to all subsequent calls.

await ChordDiagrams.ensureInitialized();

ChordDiagramsSettings.setBackgroundColor('#FFFFFF');
ChordDiagramsSettings.setGridColor('#444444');
ChordDiagramsSettings.setDotColor('#444444');
ChordDiagramsSettings.setDotStrokeColor('#444444');
ChordDiagramsSettings.setFingerTextColor('#FFFFFF');
ChordDiagramsSettings.setMutedColor('#444444');
ChordDiagramsSettings.setFretNumberColor('#444444');
ChordDiagramsSettings.setTuningColor('#444444');
ChordDiagramsSettings.setTitleColor('#444444');

ChordDiagramsSettings.setHideTitle(true);
ChordDiagramsSettings.setHideTuning(true);

ChordDiagramsSettings.reset();

Supported Chords #

Guitar: 529 chord entries using standard tuning E2-A2-D3-G3-B3-E4.

Ukulele: 547 chord entries using standard tuning G4-C4-E4-A4.

Supported suffixes include: major, minor, 7, m7, 6, m6, 9, m9, 11, 13, maj7, maj9, dim, dim7, aug, sus2, sus4, 7sus4, add9, m7b5, 7b5, 7b9, 7#9, alt, and slash chords.

Platforms #

Minimum requirements:

Web uses WebAssembly. Native platforms use the bundled C++ implementation through FFI.

Demo App #

Run the example app:

cd example
flutter run -d chrome

Acknowledgements #

Based on chords-db and react-chords by David Rubert, MIT License.