# flutter piano
a crossplatform midi piano built with flutter.io.
- this application runs on both ios and android.
- this runs a custom crossplatform midi synth i built for a flutter plugin
flutter_midi
that uses .sf2 sound font files.
assets:
- assets/sounds/piano.sf2
- there are semantics included for the visually impaired. all keys show up as buttons and have the pitch name of the midi note not just the number.
getting started
this application only runs in landscape mode, orientation is set in the androidmanifest.xml and in the runner.xcworspace settings.
- make sure to turn your volume up and unmute the phone (the application will try to unmute the device but it can be overriden).
- tap on any note to play
- scroll in either direction to change octaves
- polyphony is supported with multiple fingers
configuration
- optionally the key width can be changed in the settings for adjusting key densitity.
- the key labels can also be turned off if you want a more minimal look.
ios
android
- you can change the piano.sf2 file to any sound font file for playing different instruments.
screenshots
ios
android
code
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_midi/flutter_midi.dart';
import 'package:tonic/tonic.dart';
void main() => runapp(myapp());
class myapp extends statefulwidget {
@override
_myappstate createstate() => _myappstate();
}
class _myappstate extends state<myapp> {
@override
initstate() {
fluttermidi.unmute();
rootbundle.load("assets/sounds/piano.sf2").then((sf2) {
fluttermidi.prepare(sf2: sf2, name: "piano.sf2");
});
super.initstate();
}
double get keywidth => 80 + (80 * _widthratio);
double _widthratio = 0.0;
bool _showlabels = true;
@override
widget build(buildcontext context) {
return materialapp(
title: 'the pocket piano',
theme: themedata.dark(),
home: scaffold(
drawer: drawer(
child: safearea(
child: listview(children: <widget>[
container(height: 20.0),
listtile(title: text("change width")),
slider(
activecolor: colors.redaccent,
inactivecolor: colors.white,
min: 0.0,
max: 1.0,
value: _widthratio,
onchanged: (double value) =>
setstate(() => _widthratio = value)),
divider(),
listtile(
title: text("show labels"),
trailing: switch(
value: _showlabels,
onchanged: (bool value) =>
setstate(() => _showlabels = value))),
divider(),
]))),
appbar: appbar(title: text("the pocket piano")),
body: listview.builder(
itemcount: 7,
controller: scrollcontroller(initialscrolloffset: 1500.0),
scrolldirection: axis.horizontal,
itembuilder: (buildcontext context, int index) {
final int i = index * 12;
return safearea(
child: stack(children: <widget>[
row(mainaxissize: mainaxissize.min, children: <widget>[
_buildkey(24 + i, false),
_buildkey(26 + i, false),
_buildkey(28 + i, false),
_buildkey(29 + i, false),
_buildkey(31 + i, false),
_buildkey(33 + i, false),
_buildkey(35 + i, false),
]),
positioned(
left: 0.0,
right: 0.0,
bottom: 100,
top: 0.0,
child: row(
mainaxisalignment: mainaxisalignment.spacebetween,
mainaxissize: mainaxissize.min,
children: <widget>[
container(width: keywidth * .5),
_buildkey(25 + i, true),
_buildkey(27 + i, true),
container(width: keywidth),
_buildkey(30 + i, true),
_buildkey(32 + i, true),
_buildkey(34 + i, true),
container(width: keywidth * .5),
])),
]),
);
},
)),
);
}
widget _buildkey(int midi, bool accidental) {
final pitchname = pitch.frommidinumber(midi).tostring();
final pianokey = stack(
children: <widget>[
semantics(
button: true,
hint: pitchname,
child: material(
borderradius: borderradius,
color: accidental ? colors.black : colors.white,
child: inkwell(
borderradius: borderradius,
highlightcolor: colors.grey,
ontap: () {},
ontapdown: (_) => fluttermidi.playmidinote(midi: midi),
))),
positioned(
left: 0.0,
right: 0.0,
bottom: 20.0,
child: _showlabels
? text(pitchname,
textalign: textalign.center,
style: textstyle(
color: !accidental ? colors.black : colors.white))
: container()),
],
);
if (accidental) {
return container(
width: keywidth,
margin: edgeinsets.symmetric(horizontal: 2.0),
padding: edgeinsets.symmetric(horizontal: keywidth * .1),
child: material(
elevation: 6.0,
borderradius: borderradius,
shadowcolor: color(0x802196f3),
child: pianokey));
}
return container(
width: keywidth,
child: pianokey,
margin: edgeinsets.symmetric(horizontal: 2.0));
}
}
const borderradiusgeometry borderradius = borderradius.only(
bottomleft: radius.circular(10.0), bottomright: radius.circular(10.0));
Comments are closed.