flutter_chord

Test

Chord parser for Flutter apps. Original repository at: paurakhsharma

Features

  • Transpose Chords
  • Auto Scroll
  • Show/Hide chords
  • Show/Hide lyrics
  • Minor scale
  • Underline chord syllables
  • Custom chord notation (presentation)
  • Tap on chords callback
  • Customizable text and chord styles
  • Customizable widget padding
  • Adjustable scroll speed
  • Chord/lyrics parsing and styling via ChordLyricsDocument
  • Chord transposition with semitone increment
  • Chord parsing with support for modifiers and inversions

Usage

1) Render the Lyrics and Chords directly.

final textStyle = TextStyle(fontSize: 18, color: Colors.white);
final chordStyle = TextStyle(fontSize: 20, color: Colors.green);

final lyrics = '''
[C]Give me Freedom, [F]Give me fire
[Am] Give me reason, [G]Take me higher
''';

@override
  Widget build(BuildContext context) {
    return LyricsRenderer(
    lyrics: _lyrics, // String containing the lyrics and chords in chordpro format
    textStyle: textStyle, // TextStyle for lyrics text
    chordStyle: chordStyle, // TextStyle for chord text
    widgetPadding: 50, // Padding around the widget (double)
    onTapChord: (String chord) { // Callback when a chord is tapped
      print('pressed chord: $chord');
    },
    transposeIncrement: 0, // Number of semitones to transpose chords (int)
    scrollSpeed: 0, // Auto-scroll speed (pixels per second, double)
    showChord: true, // Whether to show chords (bool)
    showText: true, // Whether to show lyrics text (bool)
    minorScale: false, // If true, transpose chords to the relative minor key (bool)
    underlineChordSyllables: true, // Underline the syllable under each chord (bool)
  );
}

2. Get a parsed ChordLyricsDocument and style it as you like.


final textStyle = TextStyle(fontSize: 18, color: Colors.white);
final chordStyle = TextStyle(fontSize: 20, color: Colors.green);

final lyrics = '''
[C]Give me Freedom , [F]Give me fire
[Am] Give me reason , [G]Take me higher
''';

ChordProcessor _chordProcessor = ChordProcessor(context);
ChordLyricsDocument chordLyricsDocument = _chordProcessor.processText(
  text: lyrics,
  lyricsStyle: textStyle,
  chordStyle: chordStyle,
  transposeIncrement: 0,
);

Implementation details

This section explains the main logic and algorithms used for chord parsing, transposition, and rendering in this package.

Transposing chords to the relative minor

Resumo da lógica usada para transpor acordes para a tonalidade relativa menor.

Passos principais

  1. Parse do acorde com a regex ^([A-Ga-g][#b]?)(.*)$ para separar o root (ex.: C, C#, Db) do resto (modificadores / inversões).
  2. Normalização de acidentes: flats mapeados para sustenidos via um mapa (Db -> C#, Bb -> A#, etc.) para trabalhar com um índice de semitons consistente.
  3. Índice de semitons: usa a lista ['C','C#','D','D#','E','F','F#','G','G#','A','A#','B'].
  4. Transposição para relativo menor: desloca o índice do root em -3 semitons (ex.: C → índice de C menos 3 → A → Am).
  5. Ajuste da qualidade do acorde:
    • Se o resto já começa com m ou min, mantém (ex.: Am7 → Am7).
    • Se começa com maj, remove maj (case-insensitive) e insere m (ex.: Dmaj7 → Bm7).
    • Caso contrário, adiciona m antes do resto (ex.: G7 → Em7).
  6. Ordem de aplicação: primeiro aplica-se chordPresentation (troca de notação, se fornecida), depois transposeToMinor quando minorScale == true.

Exemplos

  • C → Am
  • G → Em
  • Dmaj7 → Bm7
  • C/G → Am/G
  • Am7 → Am7 (permanece)

Observações / limitações

  • Resultado usa notação com sustenidos (C#, A#) após conversão.
  • O mapa de flats é limitado; enharmônicos mais complexos podem não ser escolhidos contextualmente.
  • Modificadores exóticos podem não ser tratados perfeitamente — a prioridade é ajustar root + qualidade minor.
  • A transposição para menor atua sobre o texto do acorde final (após transposeIncrement e possíveis trocas de notação).

Implementação: função usada no código — transposeToMinor(String chord) dentro de lib/src/lyrics_renderer.dart.

Libraries

custom_flutter_chord