A dart implementation of the chord.js javascript package to display beautiful chord diagrams

Related tags

Templates flutter_guitar_tabs
Overview

flutter_guitar_tabs

This is a dart implementation of the chord.js javascript package to display beautiful chord diagrams like the ones below.

Example 1 Example 2 Example 3

Where to get this data from

In this issue some recourses containing this data can be found.

FlutterGuitarTab

The widget FlutterGuitarTab takes two parameters, name and tab. name is the name displayed on the top. tab string containing up to 6 numbers, or x, with seperating spaces. As an example:

  • "x 0 0 2 3 1"
  • "x 5 7 7 6 5"
  • "10 12 12 10 10 10"

An example of how to use this widget:

FlutterGuitarTab(
  name: 'Dm',
  tab: 'x 0 0 2 3 1',
)

TabWidget

The widget TabWidget takes two parameters, name and tabs. name is the name displayed on the top. tabs is a list of strings containing tab strings as explained above.

This is an example of how to use this widget:

TabWidget(
  name: 'Dm',
  tabs: ["x 0 0 2 3 1", "x 5 7 7 6 5", "10 12 12 10 10 10"],
)

For both widgets a size parameter can be defined that has to be an integer between 1 and 10 inclusive.

Todo:

  • Add support for fingering marks.

PR's are welcome.

You might also like...

A Flutter package with custom implementation of the Side Menu (Drawer)

A Flutter package with custom implementation of the Side Menu (Drawer)

Flutter Awesome Drawer Bar A Flutter package with custom implementation of the Side Menu (Drawer) Getting Started To start using this package, add awe

Nov 13, 2022

A package that offers various page indicators inlcuding a Flutter implementation of the Ink Page Indicator

A package that offers various page indicators inlcuding a Flutter implementation of the Ink Page Indicator

A package that offers various page indicators inlcuding a Flutter implementation of the Ink Page Indicator. See below for more examples.

Jan 6, 2022

An app to pick, upload and display images from camera and gallery with size and extension constraints.

image_uploader A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started i

Mar 7, 2022

This is my way to build a Tagged Search Field that display a list with suggestions while the user type.

This is my way to build a Tagged Search Field that display a list with suggestions while the user type.

tagged_search_field This is my way to build a Tagged Search Field that display a list with suggestions while the user type. A regular search field at

Nov 5, 2021

A simple modal progress HUD (heads-up display, or progress indicator) for flutter

A simple modal progress HUD (heads-up display, or progress indicator) for flutter

modal_progress_hud A simple widget wrapper to enable modal progress HUD (a modal progress indicator, HUD = Heads Up Display) Inspired by this article.

Nov 22, 2022

A Flutter plugin for IOS and Android providing a simple way to display PDFs.

A Flutter plugin for IOS and Android providing a simple way to display PDFs.

Pdf Viewer Plugin A Flutter plugin for IOS and Android providing a simple way to display PDFs. Features: Display PDF. Installation First, add pdf_view

Sep 26, 2022

Flutter plugin to display a popup menu button widget with handsome design and easy to use.

Flutter plugin to display a popup menu button widget with handsome design and easy to use.

menu_button Flutter widget to display a popup menu button very simply and easily customizable. Resources Documentation Pub Package GitHub Repository I

Sep 27, 2022

Flutter plugin to display a simple steps indicator line widget

Flutter plugin to display a simple steps indicator line widget

steps_indicator A simple steps indicator widget Installation Add steps_indicator: ^1.3.0 in your pubspec.yaml dependencies. And import it: import 'pac

Oct 18, 2022

Flutter Widget to display gradient text

Flutter Widget to display gradient text

GradientText A Flutter Widget for displaying gradient text, text with a gradient drawn through it. Getting Started Add the plugin (pub coming soon): d

Nov 4, 2022
Comments
  • Where should I get all the tabs data?

    Where should I get all the tabs data?

    Where should I get all the tabs data? I am using flutter_chord and when user click the chord I want to show the tabs. May I know where can I get all the tabs data?

    opened by alexaung 4
  • int to double conversion error on Android

    int to double conversion error on Android

    On android, an exception gets thrown when building the widgets:

    The following _TypeError was thrown during paint():
type 'int' is not a subtype of type 'double'

The relevant error-causing widget was: 
  TabWidget file:///C:/Users/joran/Documents/GitHub/worshipleaderapp/lib/SongRoute/ChordTabContent.dart:178:27
When the exception was thrown, this was the stack: 
#0      _MyPainter.drawFretGrid (package:flutter_guitar_tabs/flutter_guitar_tabs.dart:270:15)
#1      _MyPainter.draw (package:flutter_guitar_tabs/flutter_guitar_tabs.dart:356:10)
#2      _MyPainter.paint (package:flutter_guitar_tabs/flutter_guitar_tabs.dart:468:5)
#3      RenderCustomPaint._paintWithPainter (package:flutter/src/rendering/custom_paint.dart:564:13)
#4      RenderCustomPaint.paint (package:flutter/src/rendering/custom_paint.dart:605:7)
    opened by joranmulderij 0
  • Null Safety?

    Null Safety?

    Hi mate great package , creating an app and thinking on integrating this any chance you working on a version with null safety?

    Also would be great to be able to style the font colors and background

    really great package well done!

    opened by FlavioBarros13 5
Owner
Hi, I'm Joran Mulderij. I'm 17 years old. I do Flutter web and mobile development.
null
GitHub
Dart equivalent of console.count() in JavaScript

fCount A Dart equivalent for console.count() in JavaScript. You can learn how it works on the web in the MDN docs Available on pub.dev ?? ?? But why U

Chinmay Kabi 2 Jul 31, 2022
Life-saving helpers for working with JavaScript libraries when compiling Dart/Flutter to Web.

dartified Life-saving helpers for working with JavaScript libraries when compiling Dart/Flutter to Web. Features The functions included in this librar

Hammed Oyedele 2 Aug 19, 2022
MXFlutter 是一套使用 TypeScript/JavaScript 来开发 Flutter 应用的框架

MXFlutter 是一套使用 TypeScript/JavaScript 来开发 Flutter 应用的框架。 框架支持两种开发方式 基于 mxflutter-js 前端框架，使用 TypeScript 语言，以类似 Flutter 的 Widget 组

Tencent 719 Jan 3, 2023
Import & use javascript libraries in your flutter web projects

Import JS Library Import & use javascript libraries in your flutter web projects. flutter: assets: - assets/howler.js importJsLibrary(url: "./as

Florent CHAMPIGNY 29 Oct 1, 2022
Flutter ticket pass - A Flutter Widget to display the details of a ticket/pass purchased by customers and display the details of the purchase

ticket_pass_package A Flutter package to display the purchase of a ticket/pass along with additional details such as list of buyers. The source code i

null 40 Aug 13, 2022
Display images flutter - Simple app to display images in flutter

Display Images In Flutter Simple app to display images in a flutter. In this dem

Manish Ahire 1 Jan 29, 2022
A new flutter package project which contains lots of beautiful alert dialog that will help you lot to create beautiful awesome alert box very quickly and easily.

A new flutter package project which contains lots of beautiful alert dialog that will help you lot to create beautiful awesome alert box very quickly and easily.

Karan Soni 8 Jan 8, 2022
Get It - Simple direct Service Locator that allows to decouple the interface from a concrete implementation and to access the concrete implementation from everywhere in your App. Maintainer: @escamoteur

❤️ Sponsor get_it This is a simple Service Locator for Dart and Flutter projects with some additional goodies highly inspired by Splat. It can be used

Flutter Community 1k Jan 1, 2023
Flutter package to get keyboard height. Can be used to display a sticker/emoji modal with correct height.

flutter_persistent_keyboard_height Flutter package to get keyboard height. The height is persisted during app sessions and keyboard states (you can us

Arshak Aghakaryan 13 Oct 17, 2022
Socketio dart server and client - Full Socket.io implementation using Dart Lang

Getting Started Step 1: Run dart_server.dart Step 2: Android Emulator has proble

Trần Thiên Trọng 1 Jan 23, 2022