Simple and Easy to Use Flutter Guitar Chord Widget using Custom

FlutterGuitarChord

Simple and easy to use Flutter Guitar Chord widget using custom painter for guitar chord application

You can use guitar_chord_library package for chord data

Preview

Getting Started

To use this plugin, add flutter_guitar_chord as a dependency in your pubspec.yaml file.

Pubspec.yaml

dependencies:
    flutter_guitar_chord: ^0.0.2

Usage Examples

You can use guitar_chord_library package for chord data

import 'package:flutter_guitar_chord/flutter_guitar_chord.dart';

//...//

FlutterGuitarChord(
    baseFret: 1,
    chordName: 'Cmajor',
    fingers: '0 3 2 0 1 0',
    frets: '-1 3 2 0 1 0',
    totalString: 6,
    // labelColor: Colors.teal,
    // tabForegroundColor: Colors.white,
    // tabBackgroundColor: Colors.deepOrange,
    // barColor: Colors.black,
    // stringColor: Colors.red,
),

Note

Pull request are always welcome to contribute, flutter_guitar_chord github repo.

Release notes

See CHANGELOG

Use this package as a library

Depend on it

Run this command:

With Flutter:

 $ flutter pub add flutter_guitar_chord

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

dependencies:
  flutter_guitar_chord: ^0.0.2

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:flutter_guitar_chord/flutter_guitar_chord.dart'; 

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_guitar_chord/flutter_guitar_chord.dart';
import 'package:guitar_chord_library/guitar_chord_library.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.orange),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final List<String> _instrumentList = ['Guitar', 'Ukulele'];
  String? _selection;
  bool _useFlat = true;

  @override
  Widget build(BuildContext context) {
    var instrument = (_selection == null || _selection == 'Guitar')
        ? GuitarChordLibrary.instrument()
        : GuitarChordLibrary.instrument(InstrumentType.ukulele);

    var keys = instrument.getKeys(_useFlat);

    return DefaultTabController(
      length: keys.length,
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.white,
          title: DropdownButton<String>(
            value: _selection ?? _instrumentList[0],
            onChanged: (value) => setState(() {
              _selection = value;
            }),
            items: _instrumentList
                .map<DropdownMenuItem<String>>(
                    (String value) => DropdownMenuItem<String>(
                          value: value,
                          child: Text(value),
                        ))
                .toList(),
          ),
          actions: [
            Column(
              children: [
                Row(
                  children: [
                    const Text(
                      'Flat Note ',
                      style:
                          TextStyle(fontSize: 16, fontWeight: FontWeight.w500),
                    ),
                    Switch(
                      value: _useFlat,
                      onChanged: (v) {
                        setState(() {
                          _useFlat = v;
                        });
                      },
                    ),
                  ],
                ),
              ],
            ),
            const SizedBox(width: 24),
          ],
          bottom: TabBar(
            isScrollable: true,
            labelColor: Colors.orange,
            indicatorColor: Colors.orange,
            tabs: keys.map((e) {
              return Tab(text: e);
            }).toList(),
          ),
        ),
        body: TabBarView(
          children: keys.map(
            (e) {
              var chords = instrument.getChordsByKey(e, _useFlat);

              return GridView.builder(
                itemCount: chords!.length,
                gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
                  maxCrossAxisExtent: 200,
                  mainAxisExtent: 250,
                  crossAxisSpacing: 16,
                  mainAxisSpacing: 16,
                ),
                padding: const EdgeInsets.all(16),
                itemBuilder: (context, index) {
                  var chord = chords[index];
                  var position = chord
                      .chordPositions[0]; //I will use the first one for example
                  return Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Flexible(
                        child: FlutterGuitarChord(
                          baseFret: position.baseFret,
                          chordName: chord.name,
                          fingers: position.fingers,
                          frets: position.frets,
                          totalString: instrument.stringCount,
                          // labelColor: Colors.teal,
                          // tabForegroundColor: Colors.white,
                          // tabBackgroundColor: Colors.deepOrange,
                          // barColor: Colors.black,
                          // stringColor: Colors.red,
                        ),
                      ),
                    ],
                  );
                },
              );
            },
          ).toList(),
        ),
      ),
    );
  }
} 

Download details:

Author: ygnCybernoob

Source: https://github.com/ygnCybernoob/flutter_guitar_chord

#flutter #guitar