Flutter和弦图表插件custom_flutter_chord的使用

发布于 1周前 作者 sinazl 来自 Flutter

Flutter和弦图表插件custom_flutter_chord的使用

custom_flutter_chord 是一个用于在Flutter应用中解析和显示和弦的插件。它支持和弦转位和自动滚动功能，可以帮助开发者轻松地在应用中集成和弦显示。

特性

  • 和弦转位（Transpose Chord）
  • 自动滚动（Auto Scroll）

示例截图

使用方法

1. 直接渲染歌词和和弦

你可以直接使用 LyricsRenderer 小部件来渲染歌词和和弦：

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

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
''';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Chord Renderer Example')),
        body: LyricsRenderer(
          lyrics: lyrics,
          textStyle: textStyle,
          chordStyle: chordStyle,
          widgetPadding: 50,
          onTapChord: (String chord) {
            print('pressed chord: $chord');
          },
          transposeIncrement: 0,
          scrollSpeed: 0,
          showChord: true,
          showText: true,
          minorScale: false,
        ),
      ),
    );
  }
}

void main() => runApp(MyApp());

2. 获取解析后的 ChordLyricsDocument 并自定义样式

你也可以获取解析后的 ChordLyricsDocument 对象，并根据需要进行自定义样式：

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

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
''';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  late ChordProcessor _chordProcessor;
  late ChordLyricsDocument chordLyricsDocument;

  @override
  void initState() {
    super.initState();
    _chordProcessor = ChordProcessor(context);
    chordLyricsDocument = _chordProcessor.processText(
      text: lyrics,
      lyricsStyle: textStyle,
      chordStyle: chordStyle,
      transposeIncrement: 0,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Chord Processor Example')),
      body: Center(
        child: Text(
          chordLyricsDocument.chordLyricsLines.first.lyrics,
          style: textStyle,
        ),
      ),
    );
  }
}

void main() => runApp(MaterialApp(home: HomePage()));

完整示例 Demo

以下是一个完整的示例应用，展示了如何使用 custom_flutter_chord 插件来渲染和弦并提供一些交互功能，如转位和自动滚动：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Chord',
      themeMode: ThemeMode.dark,
      darkTheme: ThemeData.dark(),
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final chordStyle = TextStyle(fontSize: 20, color: Colors.green);
  final textStyle = TextStyle(fontSize: 18, color: Colors.white);
  String _lyrics = '';
  int transposeIncrement = 0;
  int scrollSpeed = 0;

  @override
  void initState() {
    super.initState();
    _lyrics = '''
[C]Give me Freedom, [F]Give me fire
[Am]Give me reason, [G]Take me higher
[C]See the champions [F], Take the field now
[Am]Unify us, [G]make us feel proud
 
[C]In the streets our, [F]hands are lifting
[Am]As we lose our, [G]inhibition
[C]Celebration, [F]its around us
[Am]Every nation, [G]all around us
{soc}
[C]Singing forever [F]young,
Singing [Am]songs underneath the sun[G]
Let's [C]rejoice in the beautiful game[F]
And [Am]together, every end of the day[G]
{eoc}
[C]When I get older, [F]I will be stronger
[Am]They'll call me freedom, [G]just like a waving [C]flag
And then it goes [F]back, and then it goes [Am]back
And then it goes [G]back , and then it goes …
{soc}
We all say
[C]When I get older, [F]I will be stronger
[Am]They'll call me freedom, [G]just like a waving [C]flag
And then it goes [F]back, and then it goes [Am]back
And then it goes [G]back , and then it goes …
{eoc}
''';
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Chord Example'),
      ),
      body: Column(
        children: [
          Expanded(
            child: Container(
              padding: const EdgeInsets.all(12.0),
              color: Colors.teal,
              child: TextFormField(
                initialValue: _lyrics,
                style: textStyle,
                maxLines: 50,
                onChanged: (value) {
                  setState(() {
                    _lyrics = value;
                  });
                },
              ),
            ),
          ),
          Divider(),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              Column(
                children: [
                  Row(
                    children: [
                      ElevatedButton(
                        onPressed: () {
                          setState(() {
                            transposeIncrement--;
                          });
                        },
                        child: Text('-'),
                      ),
                      SizedBox(width: 5),
                      Text('$transposeIncrement'),
                      SizedBox(width: 5),
                      ElevatedButton(
                        onPressed: () {
                          setState(() {
                            transposeIncrement++;
                          });
                        },
                        child: Text('+'),
                      ),
                    ],
                  ),
                  Text('Transpose')
                ],
              ),
              Column(
                children: [
                  Row(
                    children: [
                      ElevatedButton(
                        onPressed: scrollSpeed <= 0
                            ? null
                            : () {
                                setState(() {
                                  scrollSpeed--;
                                });
                              },
                        child: Text('-'),
                      ),
                      SizedBox(width: 5),
                      Text('$scrollSpeed'),
                      SizedBox(width: 5),
                      ElevatedButton(
                        onPressed: () {
                          setState(() {
                            scrollSpeed++;
                          });
                        },
                        child: Text('+'),
                      ),
                    ],
                  ),
                  Text('Auto Scroll')
                ],
              ),
            ],
          ),
          Divider(),
          Expanded(
            child: Container(
              padding: const EdgeInsets.all(12.0),
              color: Colors.black,
              child: LyricsRenderer(
                lyrics: _lyrics,
                textStyle: textStyle,
                chordStyle: chordStyle,
                onTapChord: (String chord) {
                  print('pressed chord: $chord');
                },
                onLyricsProcessed: (ChordLyricsDocument document) {
                  print(document.chordLyricsLines.first.chords.toString());
                  print(document.chordLyricsLines.first.lyrics);
                },
                transposeIncrement: transposeIncrement,
                scrollSpeed: scrollSpeed,
                widgetPadding: 24,
                lineHeight: 4,
                showText: true,
                showChord: true,
                minorScale: false,
                horizontalAlignment: CrossAxisAlignment.start,
                leadingWidget: Padding(
                  padding: const EdgeInsets.symmetric(
                    vertical: 16,
                  ),
                  child: Text(
                    'Leading Widget',
                    style: chordStyle,
                  ),
                ),
                trailingWidget: Text(
                  'Trailing Widget',
                  style: chordStyle,
                ),
              ),
            ),
          )
        ],
      ),
    );
  }
}

这个示例展示了如何通过 LyricsRenderer 渲染和弦和歌词，并提供了和弦转位和自动滚动的功能。希望这能帮助你在Flutter应用中实现和弦显示功能！


更多关于Flutter和弦图表插件custom_flutter_chord的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter和弦图表插件custom_flutter_chord的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何使用 custom_flutter_chord 插件来创建弦图表的示例代码。假设你已经在你的 Flutter 项目中添加了 custom_flutter_chord 依赖，并且已经运行了 flutter pub get。

首先，确保你的 pubspec.yaml 文件中包含以下依赖：

dependencies:
  flutter:
    sdk: flutter
  custom_flutter_chord: ^最新版本号  # 替换为实际的最新版本号

然后，你可以在你的 Dart 文件中使用 custom_flutter_chord 来创建一个弦图表。以下是一个简单的示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Chord Diagram',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ChordDiagramScreen(),
    );
  }
}

class ChordDiagramScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 定义弦图表的数据
    final chordData = [
      {
        'name': 'A',
        'relations': [
          {'name': 'B', 'value': 10},
          {'name': 'C', 'value': 15},
        ],
      },
      {
        'name': 'B',
        'relations': [
          {'name': 'A', 'value': 10},
          {'name': 'C', 'value': 5},
          {'name': 'D', 'value': 20},
        ],
      },
      {
        'name': 'C',
        'relations': [
          {'name': 'A', 'value': 15},
          {'name': 'B', 'value': 5},
          {'name': 'D', 'value': 10},
        ],
      },
      {
        'name': 'D',
        'relations': [
          {'name': 'B', 'value': 20},
          {'name': 'C', 'value': 10},
        ],
      },
    ];

    return Scaffold(
      appBar: AppBar(
        title: Text('Chord Diagram Example'),
      ),
      body: Center(
        child: SizedBox(
          width: double.infinity,
          height: double.infinity,
          child: CustomChordDiagram(
            data: chordData,
            // 配置弦图表的样式
            chordStyle: ChordStyle(
              ribbonColor: (a, b, value) => Colors.blue.withOpacity(0.6),
              labelStyle: TextStyle(color: Colors.black, fontSize: 14),
            ),
          ),
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的弦图表，其中包含四个节点（A, B, C, D）和它们之间的关系。CustomChordDiagram 组件接受一个数据列表，每个数据项包含一个节点的名称以及它与其他节点的关系。

ChordStyle 类允许你自定义弦图表的样式，例如连接带的颜色（ribbonColor）和标签的样式（labelStyle）。ribbonColor 函数接受三个参数：两个节点的名称（a 和 b）以及它们之间的关系值（value），并返回一个颜色值。

请注意，custom_flutter_chord 插件的具体 API 可能会根据版本有所变化，因此建议查阅最新的官方文档或源代码以获取最准确的信息。如果插件包含更多高级配置或功能，你可以根据需求进一步调整和扩展上述代码。

回到顶部