🎹 How to Read MIDI (.mid) Files in Flutter for a Piano Learning App

 

If you're building a piano learning app in Flutter, using MIDI (.mid) files is one of the smartest ways to provide structured lessons, playback, and note tracking. MIDI files store musical data — not audio — such as note pitches, durations, and velocities. This makes them perfect for interactive apps like virtual pianos or music games.

In this blog post, we’ll show you how to read .mid files in Flutter using the dart_midi package.

---

📦 Step 1: Add Dependencies

Add the dart_midi package in your pubspec.yaml:

yaml
dependencies:
  dart_midi: ^1.0.2

This package lets you parse MIDI files and access tracks, notes, and events in Dart code.

---

📂 Step 2: Load the MIDI File

You can load the file either from local storage using file_picker or from your app assets.

From Assets:

yaml
flutter:
  assets:
    - assets/songs/example.mid

From File Picker:

dart
import 'package:file_picker/file_picker.dart';

void pickMidiFile() async {
  FilePickerResult? result = await FilePicker.platform.pickFiles(type: FileType.custom, allowedExtensions: ['mid']);
  if (result != null) {
    String path = result.files.single.path!;
    readMidiFile(path);
  }
}

---

🧠 Step 3: Parse the MIDI File

Use dart_midi to extract musical events:

dart
import 'dart:io';
import 'package:dart_midi/dart_midi.dart';

void readMidiFile(String path) {
  final parser = MidiParser();
  final bytes = File(path).readAsBytesSync();
  final midi = parser.parseMidiFromBuffer(bytes);

  for (var track in midi.tracks) {
    for (var event in track) {
      if (event.type == 'noteOn' || event.type == 'noteOff') {
        print('Note: ${event.noteNumber}, '
              'Velocity: ${event.velocity}, '
              'Type: ${event.type}, '
              'Time: ${event.deltaTime}');
      }
    }
  }
}

---

🎹 Step 4: Show Notes in Your Piano App

Now that you have the note numbers and timing, you can:

• Highlight the keys on a virtual piano

• Schedule notes to play at the correct time

• Build a "follow along" note display for learners

For example, MIDI note 60 = Middle C, and you can map that to your Flutter piano UI.

---

🚀 Bonus: Create a Piano Roll or Sheet Music View

If you want to visualize the notes:

• Use Flutter CustomPainter to draw a piano roll

• Animate notes based on their deltaTime

• Or use a Flutter package like flutter_midi_command to interact with real MIDI devices

---

🧾 Final Thoughts

With just a few lines of code, you can turn any .mid file into a powerful tool for interactive learning in your Flutter app. Whether you're building a piano trainer, sheet music reader, or MIDI player, this approach gives you full control of musical data.