I am making a piano app as a beginner for demo. I have made the whole page for Piano including UI and audio functionality. But, the problem is that when I open PianoMain
so, it plays any one of key's audio. Then if I press any key's onTap
it doesn't work. So, let me put my code here. And, please check if you can find any mistake of mine.
AudioPlayer player = AudioPlayer();
void playAudio({required String fileName}) {
player.play(AssetSource(fileName));
}
Package is:
import 'package:audioplayers/audioplayers.dart';
@override
void dispose() async {
super.dispose();
await player.stop();
}
Row(
children: [
PianoButtonSuperKey(
keyPress: () {
playAudio(fileName: "piano/piano3.mp3");
},
),
PianoButton(
onSuperKeyPress: () {
playAudio(fileName: "piano/blackpiano1.mp3");
},
onMainKeyPress: () {
playAudio(fileName: "piano/piano4.mp3");
},
),
PianoButtonSuperKey(
keyPress: () {
playAudio(fileName: "piano/piano5.mp3");
},
),
PianoButton(
onSuperKeyPress: () {
playAudio(fileName: "piano/hard7.mp3");
},
onMainKeyPress: () {
playAudio(fileName: "piano/piano10.mp3");
},
),
PianoButton(
onSuperKeyPress: () {
playAudio(fileName: "piano/hardpiano8.mp3");
},
onMainKeyPress: () {
playAudio(fileName: "piano/audio6.mp3");
},
),
],
),
class PianoButton extends StatelessWidget {
const PianoButton(
{super.key, required this.onMainKeyPress, required this.onSuperKeyPress});
final Function onMainKeyPress;
final Function onSuperKeyPress;
@override
Widget build(BuildContext context) {
return Expanded(
flex: 1,
child: Stack(
clipBehavior: Clip.none,
children: [
Container(
height: double.infinity,
width: double.infinity,
padding: const EdgeInsets.only(right: 8, bottom: 2, top: 2),
child: GestureDetector(
onTap: onMainKeyPress(),
child: Container(
decoration: const BoxDecoration(
color: Colors.white, boxShadow: [BoxShadow(blurRadius: 2)]),
),
),
),
Positioned(
top: 2,
right: 98,
child: SizedBox(
width: 50,
height: 200,
child: GestureDetector(
onTap: onSuperKeyPress(),
child: Container(
decoration: const BoxDecoration(color: Colors.black),
),
),
],
),
);
}
}
class PianoButtonSuperKey extends StatelessWidget {
const PianoButtonSuperKey({super.key, required this.keyPress});
final Function keyPress;
@override
Widget build(BuildContext context) {
return Expanded(
flex: 1,
child: Container(
height: double.infinity,
width: double.infinity,
padding: const EdgeInsets.only(right: 8, bottom: 2, top: 2),
child: GestureDetector(
onTap: keyPress(),
child: Container(
decoration: const BoxDecoration(
color: Colors.white, boxShadow: [BoxShadow(blurRadius: 2)]),
),
),
),
);
}
}
I hope I could clear.
It looks like you are calling the functions onMainKeyPress and onSuperKeyPress with () in your GestureDetector's onTap method. This is causing the functions to be executed immediately when the widget is built instead of when the widget is tapped.
To fix this, you can remove the () when calling the functions in your GestureDetector's onTap method. For example, change onTap: onMainKeyPress() to onTap: onMainKeyPress. Similarly, change onTap: onSuperKeyPress() to onTap: onSuperKeyPress.