Flutter虚拟钢琴插件flutter_piano_pro的使用

Flutter虚拟钢琴插件flutter_piano_pro的使用

简介

flutter_piano_pro 是一个用于Flutter应用程序的钢琴组件。它提供了一个可配置的键盘界面，允许用户与钢琴音符进行交互，并接收事件回调。

安装

在 pubspec.yaml 文件中添加 flutter_piano_pro 作为依赖项：

dependencies:
  flutter_piano_pro: ^0.5.0

使用

首先，导入必要的文件：

import 'package:flutter/material.dart';
import 'package:flutter_piano_pro/flutter_piano_pro.dart';
import 'package:flutter_piano_pro/note_model.dart';
import 'package:flutter_piano_pro/note_names.dart';

然后，在你的小部件树中使用 PianoPro 小部件来添加钢琴：

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter Piano Pro Demo"),
      ),
      body: Center(
        child: PianoPro(
          noteCount: 7, // 显示的音符数量（不包括黑键）
          totalWidth: 500, // 钢琴的总宽度
          expandHorizontal: true, // 如果为true，钢琴将水平扩展以填充可用空间
          buttonHeight: 250, // 钢琴键的高度
          showNames: true, // 是否显示音符名称
          showOctaveNumber: true, // 是否显示八度编号
          firstNote: 0, // 第一个显示的音符索引，0 = C(Do)
          firstNoteOctave: 3, // 第一个显示的音符所在的八度
          noteType: NoteType.english, // 音符类型（例如：英语、罗马尼亚语等）
          onTapDown: (note, tapId) {
            if (note == null) return;
            debugPrint('DOWN: note= ${note.name + note.octave.toString() + (note.isFlat ? "♭" : '')}, tapId= $tapId');
          },
          onTapUpdate: (note, tapId) {
            if (note == null) return;
            debugPrint('UPDATE: note= ${note.name + note.octave.toString() + (note.isFlat ? "♭" : '')}, tapId= $tapId');
          },
          onTapUp: (tapId) {
            debugPrint('UP: tapId= $tapId');
          },
        ),
      ),
    );
  }
}

配置选项

PianoPro 提供了多个配置选项，以便你可以根据需要自定义钢琴的外观和行为：

• noteCount：显示的音符数量。
• totalWidth：钢琴的总宽度。如果 expandHorizontal 为 false，则这是钢琴的固定宽度；如果为 true，则忽略此参数。
• expandHorizontal：如果为 true，钢琴将水平扩展以填充可用空间；如果为 false，钢琴将具有由 totalWidth 定义的固定宽度。
• buttonHeight：钢琴键的高度。
• showNames：如果为 true，音符名称将显示在键上。
• showOctaveNumber：如果为 true，八度编号将显示在键上。
• firstNote：第一个显示的音符索引，0 = C(Do)。
• firstNoteOctave：第一个显示的音符所在的八度。
• noteType：显示的音符类型（例如：NoteType.english、NoteType.romanian 等）。
• onTapDown：当音符被按下时调用的函数，传递 NoteModel 和指针ID作为参数。
• onTapUpdate：当已经按下的指针移动时调用的函数，传递 NoteModel 和指针ID作为参数。
• onTapUp：当音符被释放时调用的函数，传递指针ID作为参数。

完整示例Demo

以下是一个完整的示例，展示了如何在Flutter应用中使用 PianoPro，并添加了一个 ListView 来显示当前按下的音符：

import 'package:flutter/material.dart';
import 'package:flutter_piano_pro/flutter_piano_pro.dart';
import 'package:flutter_piano_pro/note_model.dart';
import 'package:flutter_piano_pro/note_names.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  [@override](/user/override)
  MyHomePageState createState() => MyHomePageState();
}

class MyHomePageState extends State<MyHomePage> {
  Map<int, NoteModel> pointerAndNote = {};

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Flutter Piano Pro Demo"),
      ),
      body: Column(
        children: [
          Expanded(
            child: PianoPro(
              noteCount: 7, // 不包括黑键的音符数量
              totalWidth: 500,
              expandHorizontal: true, // 如果为true，totalWidth = constraints.maxWidth
              buttonHeight: 250,
              showNames: true,
              showOctaveNumber: true,
              firstNote: 0, // C
              firstNoteOctave: 3,
              noteType: NoteType.english, // A, B, C, D, E, F, G
              onTapDown: (note, tapId) {
                if (note == null) return;
                setState(() => pointerAndNote[tapId] = note);
                debugPrint('DOWN: note= ${note.name + note.octave.toString() + (note.isFlat ? "♭" : '')}, tapId= $tapId');
              },
              onTapUpdate: (note, tapId) {
                if (note == null) return;
                if (pointerAndNote[tapId] == note) return;
                setState(() => pointerAndNote[tapId] = note);
                debugPrint('UPDATE: note= ${note.name + note.octave.toString() + (note.isFlat ? "♭" : '')}, tapId= $tapId');
              },
              onTapUp: (tapId) {
                setState(() => pointerAndNote.remove(tapId));
                debugPrint('UP: tapId= $tapId');
              },
            ),
          ),
          Expanded(
            child: ListView.builder(
              itemCount: pointerAndNote.length,
              itemBuilder: (BuildContext context, int index) {
                final keys = pointerAndNote.keys.toList();
                return ListTile(
                  title: Text(
                    "${pointerAndNote[keys[index]]!.name}${pointerAndNote[keys[index]]!.octave}${pointerAndNote[keys[index]]!.isFlat ? "♭" : ''}",
                    textAlign: TextAlign.center,
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}